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

Guidelines

When to use

Card is a container that groups related content about one subject.

Do

Make the Card pressable when the whole Card navigates to one destination. Keep the Card static when only one element inside it is actionable.
Limit a Card to no more than two actions.
In horizontal layouts, prefer 2 to 4 cards per row at desktop breakpoints, depending on content width.

Avoid

Adding other clickable elements inside a pressable Card.
Using Card for data people compare, sort, filter, or bulk-edit. Use Table.
Using Card for flat selectable option lists. Use ListBox.
Nesting a Card inside a Card.

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.