Card

Cards are flexible containers for grouping related content and actions.

Import

Usage

This is a basic card with some content.

Sizes

Size: SM

Size: MD

Size: LG

Variants

Default variant - Standard card appearance with background color.

Bordered variant - Card with a visible border using the divider color.

With Header

Card Title
This is a description that provides context about the card content.

Your card content goes here.

With Action

Settings
Manage your account settings

Configure your preferences and account settings.

Interactive

Interactive Card
Click me to see the effect

This card responds to clicks with hover and ripple effects.

Full Composition

Product Card
Premium subscription plan

$29/month

Access to all premium features, priority support, and exclusive content.

Disable Animation

Newsletter
Stay updated with our latest news

Get weekly updates on new features, tips, and exclusive content delivered to your inbox.

Data Attributes

  • -
    data-slot="card"Main card element identifier
  • -
    data-slot="card-header"Card header container identifier
  • -
    data-slot="card-title"Card title element identifier
  • -
    data-slot="card-description"Card description element identifier
  • -
    data-slot="card-content"Card content container identifier
  • -
    data-slot="card-footer"Card footer container identifier
  • -
    data-slot="card-action"Card action element identifier

Accessibility

Keyboard Support

  • -
    EnterActivates the card when interactive prop is true
  • -
    SpaceActivates the card when interactive prop is true
  • -
    TabMoves focus to the next focusable element

ARIA Attributes

  • -
    roleAutomatically set based on interactive state (button when interactive)
  • -
    tabIndexSet to 0 when interactive to make card keyboard accessible

Card Props

AttributeTypeDefaultDescription
variant'default' | 'bordered''default'The visual style variant of the card.
size'sm' | 'md' | 'lg''md'The size/padding of the card.
interactivebooleanfalseWhether the card is interactive (hover effects, cursor pointer).
disableRipplebooleanfalseWhether to disable the ripple effect when interactive is true.
onClick(event: React.MouseEvent<HTMLDivElement>) => void-Click handler for the card.