Skip to main content

Card

A flexible container component for grouping related content with multiple styling variants

Card

The Card component is a versatile container primitive that provides consistent structure and styling for grouped content. It supports multiple visual variants, padding options, and can be made interactive for clickable card patterns.

Card Variants

Different styles for different contexts

Surface Card

Default card with subtle border and background.

Surface Card
Default card with subtle border and background.
<Card variant="surface">
Raised Card

Elevated appearance with shadow for hierarchy.

Raised Card
Elevated appearance with shadow for hierarchy.
<Card variant="raised">
Flat Card

Minimal style with secondary background.

Flat Card
Minimal style with secondary background.
<Card variant="flat">
Glass Card

Glassmorphism effect with backdrop blur.

Glass Card
Glassmorphism effect with backdrop blur.
<Card variant="glass">
Outline Card

Border-only style with transparent background.

Outline Card
Border-only style with transparent background.
<Card variant="outline">
Seamless Card

No borders or background, pure container.

Seamless Card
No borders or background, pure container.
<Card variant="seamless">

API Reference

Props

PropTypeDefaultDescription
variant'surface' \| 'raised' \| 'flat' \| 'glass' \| 'outline' \| 'seamless''surface'Visual style of the card
padding'none' \| 'sm' \| 'md' \| 'lg''md'Internal padding of the card
element'div' \| 'article' \| 'section' \| 'aside''div'HTML element to render
interactivebooleanfalseEnables hover and click interactions
classstring''Additional CSS classes

Variants

  • Surface: Default card with subtle border and background
  • Raised: Elevated appearance with shadow (flat design principle)
  • Flat: Minimal style with secondary background
  • Glass: Glassmorphism effect with backdrop blur
  • Outline: Border-only style with transparent background
  • Seamless: No borders or background, pure container

Padding Options

  • None: No internal padding, useful for image cards
  • Small (sm): Compact padding for dense layouts
  • Medium (md): Default balanced padding
  • Large (lg): Generous padding for spacious layouts

Usage Examples

Basic Card

<Card variant="surface" padding="md">
  <h3>Card Title</h3>
  <p>Card content goes here</p>
</Card>

Card with Sections

<Card variant="raised">
  <div class="card-header">
    <h3>Header Section</h3>
  </div>
  <div>
    Main content area
  </div>
  <div class="card-footer">
    Footer with actions
  </div>
</Card>

Interactive Card

<Card variant="surface" interactive>
  <h3>Clickable Card</h3>
  <p>This card responds to hover and click</p>
</Card>

Glass Card

<Card variant="glass" padding="lg">
  <h2>Glassmorphism</h2>
  <p>Content with frosted glass effect</p>
</Card>

Card Grid

<div class="card-grid">
  <Card variant="surface">Item 1</Card>
  <Card variant="surface">Item 2</Card>
  <Card variant="surface">Item 3</Card>
</div>

Skeleton Loading

<Card variant="surface" class="skeleton">
  <div style="height: 100px;">
    <!-- Loading placeholder -->
  </div>
</Card>

Design Tokens

The Card component uses the following design tokens:

  • Background: --surface, --surface-secondary, --glass-bg
  • Borders: --border, --glass-border
  • Spacing: --space-4, --space-6, --space-8
  • Radius: --radius-lg
  • Shadows: --shadow-md, --shadow-lg
  • Transitions: --transition-base, --transition-fast
  • Effects: --glass-blur for backdrop filter

Composition Patterns

Card Sections

The Card component supports special section classes that automatically handle margins and styling:

  • .card-header: Top section with bottom border
  • .card-footer: Bottom section with top border and secondary background

These sections automatically adjust their negative margins to align with the card’s padding.

Responsive Behavior

Cards automatically adjust padding on mobile devices:

  • Medium padding becomes --space-4 on small screens
  • Large padding becomes --space-6 on small screens

Accessibility

  • Semantic HTML elements can be specified via the element prop
  • Interactive cards have appropriate cursor and focus states
  • Proper contrast ratios maintained across all variants
  • Glass variant ensures text remains readable over blurred backgrounds