Card

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.

Card API

interface CardProps {
  /**
   * Sets the appearance of the card.
   *
   * `filled`
   * The card will have a shadow, border and background color.
   *
   * `filled-alternative`
   * This appearance is similar to `filled`, but the background color will be a little darker.
   *
   * `outline`
   * This appearance is similar to `filled`, but the background color will be transparent and no shadow applied.
   *
   * `subtle`
   * This appearance is similar to `filled-alternative`, but no border is applied.
   * @default 'filled'
   */
  appearance?: "filled" | "outline" | "subtle" | "filled-alternative";

  as?: "div";

  /**
   * The internal checkbox element that renders when the card is selectable.
   */
  checkbox?: ({ as?: "input"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, "children"> & { children?: undefined; }) | null | undefined;

  children?: any;

  className?: string;

  /**
   * Defines whether the card is initially in a selected state when rendered.
   * @default false
   */
  defaultSelected?: boolean;

  /**
   * Makes the card and card selection disabled (not propagated to children).
   * @default false
   */
  disabled?: boolean;

  /**
   * Floating action that can be rendered on the top-right of a card. Often used together with
   * `selected`, `defaultSelected`, and `onSelectionChange` props
   */
  floatingAction?: WithSlotShorthandValue<{ as?: "div"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Placement of the `floatingAction` slot within the card.
   * - 'right' (default): matches stock Fluent placement
   * - 'left': left edge
   * @default 'right'
   */
  floatingActionPosition?: "right" | "left";

  /**
   * Sets the focus behavior for the card.
   *
   * `off`
   * The card will not focusable.
   *
   * `no-tab`
   * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when
   * pressing the Escape key.
   *
   * `tab-exit`
   * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing
   * the Tab key on the last inner element.
   *
   * `tab-only`
   * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus
   * after the last inner element.
   * @default 'off'
   */
  focusMode?: "off" | "no-tab" | "tab-exit" | "tab-only";

  /**
   * Callback to be called when the selected state value changes.
   */
  onSelectionChange?: ((event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void);

  /**
   * Defines the orientation of the card.
   * @default 'vertical'
   */
  orientation?: "horizontal" | "vertical";

  ref?: Ref<HTMLDivElement>;

  /**
   * Defines the controlled selected state of the card.
   * @default false
   */
  selected?: boolean;

  /**
   * Controls the card's border radius and padding between inner elements.
   * @default 'medium'
   */
  size?: "small" | "medium" | "large";

  style?: CSSProperties;
}