Skip to content

Card

Cards are content containers with optional header, body, and footer slots.

Basic

A simple card with header, body, and footer.

Card Title

This is the card body content. It can contain any elements.

Variants

Cards support default, interactive (hover effect), and outlined styles.

Default

This is the default card variant.

Interactive

This is the interactive card variant.

Outlined

This is the outlined card variant.

Recipe Example

A realistic recipe card showing how components compose together.

Pasta Carbonara

Easy

Classic Italian pasta with eggs, cheese, pancetta, and pepper. A comforting dish ready in under 30 minutes.

30 min4 servings
PropTypeDefaultDescription
variant"default" | "interactive" | "outlined""default"Visual style. Interactive adds hover effects, outlined uses a border-only style.
padding"none" | "sm" | "md" | "lg""md"Controls internal padding of the card.
classNamestring—Additional CSS class names.

Related Components

Badge

Add status labels to cards

Avatar

Show user info in card headers

Divider

Separate card content sections

Best Practices

✅ Do

  • Use CardHeader/Body/Footer for consistent structure
  • Keep card content scannable
  • Use shadow variants for interactive cards
  • Limit cards to one primary action

❌ Don't

  • Nest cards more than one level deep
  • Overload cards with too many actions
  • Use cards for simple text content
  • Mix card sizes in the same grid

Accessibility

FeatureSupport
Semantic HTMLUse article element when appropriate
Focus managementKeyboard-navigable for interactive cards
aria-labelDescriptive labels for card actions