Card

Copy for LLM

Card is a digital index container for grouping related information and actions in a clear and engaging way.

Import

import { Card } from "@cfa/react-core";

Live Editor

Examples

Composed

This is a Simple Card example composed with all subcomponents.

Card.Content, Card.Actions and Card.Media all have an order set to control the visual order of these components.

Notice that Card.Media is the last component nested in Card.Root, but visually is ordered first. We are following the accessibility guidance for images in cards from W3:

In the markup, the card text is first in the source order to prioritize it over the icon/image. Flexbox is used to place the icon/image ahead of the card text visually, via the order property.

Card.Title, Card.Subtitle, and Card.Body provide consistent styling for text content.

Outlined

The outlined prop adds a border to the card. By default, the card is not outlined.

Props

Visit the Documentation Site for the full list of props.

Card.Root

Name	Type	Default	Description
className	`string`	-	-
id	`string`	-	-
outlined	`boolean`	`false`	Include an outline on the card
style	`CSSProperties`	-	-