Atom

Card

Container component for grouping related content with optional elevation, padding, and border radius.

Overview

The Card component is a versatile container for grouping related content. It supports different visual styles (elevated, outlined, filled), responsive padding and radius, and can be made interactive for clickable cards.

This is a basic card with default settings.

Props

Prop Type Default Description
padding ResponsiveValue<'none' | 'sm' | 'md' | 'lg'> 'md' Internal padding - can be responsive
radius ResponsiveValue<'none' | 'sm' | 'md' | 'lg'> 'md' Border radius - can be responsive
elevation 'none' | 'sm' | 'md' | 'lg' 'sm' Shadow depth
variant 'elevated' | 'outlined' | 'filled' 'elevated' Visual style
interactive boolean false Enables hover/active states
fullWidth boolean false Card takes full container width

Variants

Visual Variants

Three styles for different visual contexts.

Elevated

Floating card with shadow

Outlined

Bordered, no shadow

Filled

Tinted background 

<Card variant="elevated">...</Card>
<Card variant="outlined">...</Card>
<Card variant="filled">...</Card>

Elevation Levels

Control shadow depth for elevated cards.

None
Small
Medium
Large

Padding

Control internal spacing.

None
Small
Medium
Large

Radius

Control border radius.

None
Small
Medium
Large

Examples

Interactive Card

Hover to see the interactive state.

Clickable Card

Hover over me to see the effect

Outlined Interactive

Border highlights on hover 

<Card interactive onClick={handleClick}>
  Clickable content
</Card>

Stat Card (Dashboard Pattern)

Common pattern from your dashboard.

Total Identities

12,345

↗ +18% from last month

Active Patients

11,250

↗ +120 new enrollments

Responsive Padding

Different padding at different breakpoints.

This card has sm padding on mobile, lg on tablet+. Resize your browser to see. 

<Card padding={{ xs: 'sm', md: 'lg' }}}>
  Responsive padding
</Card>

Card with Avatar and Badge

Composing with other components.

MA
Maya Alvarez Active

Clinic Manager

Accessibility

  • Interactive Cards: When using interactive, ensure the card has a clear focus indicator and is keyboard accessible.
  • Semantic Structure: Use appropriate heading levels within card content.
  • Click Handler: For clickable cards, consider using a link or button as the primary interactive element.