CardHeader | CoreAI design system

Default

Loading interactive example. Full source is available below.

View example source

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { CardHeader } from "@coreai-ds/react-components";
import { Text } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { MoreHorizontal20Regular } from "@fluentui/react-icons";

export const Default = () => {
    const assetUrl = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/stories/src/assets/';
    const powerpointLogoURL = `${assetUrl}pptx.png`;
    const styles = /* css */ `
      .card-header-example__header {
        width: 300px;
      }
    `;
    return (<>
        <style>{styles}</style>
        <CardHeader className="card-header-example__header" image={{ as: 'img', src: powerpointLogoURL, alt: 'Microsoft PowerPoint logo' }} header={<Text preset="body">
              <b>App Name</b>
            </Text>} description={<Text preset="bodyS">Developer</Text>} action={<Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options"/>}/>
      </>);
};

export default Default;

API referenceGenerated CoreAI prop and type summaries

API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

CardHeader API

Component to render an image, text and an action in a Card component.

interface CardHeaderProps {
  /**
   * Container that renders on the far end of the footer, used for action buttons.
   */
  action?: WithSlotShorthandValue<{ as?: "div"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  as?: "div";

  children?: any;

  className?: string;

  /**
   * Element used to render short descriptions related to the title.
   */
  description?: WithSlotShorthandValue<{ as?: "div"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Element used to render the main header title.
   */
  header?: WithSlotShorthandValue<{ as?: "div"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Element used to render an image or avatar related to the card.
   */
  image?: WithSlotShorthandValue<{ as?: "div"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, "children"> & { children?: any; }> | ({ as: "img"; } & Omit<Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & { ref?: ((instance: HTMLImageElement | null) => void) | RefObject<HTMLImageElement> | null | undefined; }, "children"> & { children?: undefined; }) | null | undefined;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}

Implementation

CoreAI 0.12.0; Fluent 9.74.9.

Setup and dependencies.

Import components from @coreai-ds/react-components. CoreAI guidance above takes precedence over API demonstration examples.