# Core/Card - Design

The base component for the card.

## Usage

Use a Card to group related content—title, optional description, body, actions, and footer—into one scannable unit, often in grids or lists of similar items.

Treat the card as a container: put links and buttons inside slots rather than making the whole surface ambiguous.

## Properties

### Title

<p>
  All cards must have a title identifying their content purpose. Use sentence case.
</p>

<p>
  Card titles are wrapped by an `h2` by default, but can change based on their hierarchy within the page. Be sure to
  note the heading level in your design file. The header's visual presentation remains the same regardless of
  heading level.
</p>

### Description

<p>
  Optional. The description gives additional context to the contexts of the card. Descriptions should be brief,
  taking up no more than a single line.
</p>

### Actions

<p>
  Contextual actions act on the main content area but keep the user's workflow within the card. Common examples
  would be controls that act upon data visualizations, such as a View Switcher and range selections.
</p>

<p>
  Supporting, non-interactive, data can also be displayed in this space.
</p>

### Content

<p>
  The primary content of the card. This is generally "one thing", though that could be a complex element such as a
  graph or form.
</p>

### Footer

<p>
  Place actions or supplementary information to the primary content in the card's footer.
</p>

<p>
  Actions placed here (e.g., a submit button for a form) take the user's workflow out of the card. There should be
  an explicit indication of completion within the context of the card when the action is taken.
</p>

## Layout and spacing

* Padding: `spacing.xl` on all sides (standard), `spacing.lg` for compact cards.
* Title and description: `spacing.sm` gap between them.
* Title/description block and content: `spacing.lg` gap.
* Border: `shape.border.default`, `shape.radius.xl`.
* Background: `color.background.panel.solid`.

## Behavior

* Cards are static containers by default.
* If the entire card is interactive (e.g., a selectable card), use `role="button"` with keyboard support. Prefer [RadioTile](?path=/docs/core-radiotile--design) for selection scenarios.

## Content

* Title: sentence case, noun phrase.
* Description: optional; one short line, sentence case with punctuation if needed.
* Action labels: verb-first, title case.

## Best Practices

Do:

* Do include a title in every card.
* Do use the footer slot for secondary metadata (timestamps, status).

Don't:

* Don't make the entire card surface the only navigation affordance — put a [Link](?path=/docs/core-link--design) or [Button](?path=/docs/core-button--design) inside the content.
* Don't use Card for tabular data — use a table.

## Accessibility

* Card titles are typically wrapped at an `h2` by default; choose the heading level (`h2`–`h6`) to match the page outline. Note the intended level in design specs—the visual style stays the same across levels.
* If the card is a landmark region, wrap with `<section aria-labelledby>`.

## Related components

* [RadioTile](?path=/docs/core-radiotile--design) — For selectable card options.
* [Modal](?path=/docs/core-modal--design) — For focused overlay containers.