Card

Content container for grouping related information. Supports image/media slots, header/body/footer structure, interactive (clickable) and horizontal layouts, and a selection state.

Card title

A short description of the card content goes here.

Open Card Playground

Anatomy

1 2 3 4
Card title

Card body text.

  1. 1 Media slot — image or arbitrary media content
  2. 2 Header — title and optional metadata
  3. 3 Body — description or primary content
  4. 4 Footer — actions or supplemental information

Options

Layout

Vertical

Default stacked layout.

Vertical (default)
Horizontal

Side-by-side media and content.

Horizontal

Interactive

Default

Clickable card.

Default
Hover

Hover state.

Hover
Selected

Selection state.

Selected

Table of options

PropertyValuesDefault
layoutvertical / horizontalvertical
interactivetrue / falsefalse
selectedtrue / falsefalse
hrefURL / nonenone

Behaviors

Link card

When href is set, the card renders as an <a> element.

Link variant

When href is provided the card renders as an <a> element, making the entire surface navigable. Combine with interactive for hover/active styles.

Selected card

The border weight increases on the selected side to indicate state.

Selection

Adding is-selected / selected highlights the card border with the brand selection color and increases the border weight. Use in card-picker or grid-selection patterns.

Usage guidelines

Use slots consistently

Title

Description that supports the title.

Do

Use the header for the title, body for supporting content, and footer for actions.

Title in body

Description and action link mixed in body.

Don't

Don't place titles and actions in the body. Use dedicated slots for predictable layout.

Content standards

  • Keep card titles short — 1–5 words.
  • Body copy should support but not repeat the title.
  • Footer actions use the button component; limit to 1–2 actions.

Keyboard interactions

KeyAction
TabMoves focus to the interactive card
Enter / SpaceActivates the card (for link or button-role cards)

Accessibility

  • Non-interactive cards use <article> — a landmark element that can be navigated by screen readers.
  • Interactive cards add tabindex="0" for keyboard focus; link cards use <a> for native keyboard support.
  • is-selected cards include aria-selected="true" to convey state to assistive technologies.
  • Media images must have meaningful alt text; decorative images should use alt="".

Theming

Card adapts across brands and modes through semantic tokens. Use the hero switches above.

For the full theming architecture see Foundations: Theming.

Design checklist

✓
All brand/mode contextsWorks across light and dark modes.
✓
Image/media slotDedicated media slot with responsive image sizing.
✓
Header/body/footer structureSemantic slot system for predictable layout.
✓
Interactive variantHover, active, and focus states for clickable cards.
✓
LayoutsVertical (default) and horizontal orientations.
✓
Selection stateBrand-colored border and aria-selected for selected cards.
✓
Keyboard accessibleTab, Enter, and Space interactions documented.
✓
Design tokensAll visual attributes as component-scoped tokens (--uif-card-*).