Card

DisplayCompoundBuilt

Grouped container with header/body/footer.

Also known as:
  • Asset card
  • Card Composable
  • Activation Card
  • Service Card
  • Inline Entry Card
  • Hover Card
  • Content Card
  • Context Card
  • Box
  • Group
  • Cards
  • Groupbox
  • Product card
  • Tile product
  • Switch card
  • Panel
  • Tile
  • Content Block
  • Info Card
  • Feature Card

Overview

Purpose

The Card component grouped container with header/body/footer.within our design system. It follows our compound layer principles, ensuring consistency and reusability across applications.

When to Use

  • Use when you need presenting information
  • Appropriate for display contexts
  • Follows compound component patterns

When Not to Use

  • Avoid when simpler alternatives exist
  • Don't use for interactive functionality
  • Consider alternatives for edge cases

Live Example

import React from 'react';
import Card from './components/Card';
import Button from './components/Button';
import Avatar from './components/Avatar';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1.5rem' }}>
      <Card>
        <Card.Header>
          <h3>Simple Card</h3>
        </Card.Header>
        <Card.Body>
          <p>This is a basic card with header and body content.</p>
        </Card.Body>
      </Card>

      <Card>
        <Card.Header>
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
            <Avatar size="small" initials="DR" />
            <div>
              <h4 style={{ margin: 0 }}>Darian Rosebrook</h4>
              <p style={{ margin: 0, fontSize: '0.875rem', opacity: 0.7 }}>2 hours ago</p>
            </div>
          </div>
        </Card.Header>
        <Card.Body>
          <p>Card with avatar and metadata in the header.</p>
        </Card.Body>
        <Card.Footer>
          <div style={{ display: 'flex', gap: '0.5rem' }}>
            <Button size="small" variant="secondary">Like</Button>
            <Button size="small" variant="secondary">Share</Button>
          </div>
        </Card.Footer>
      </Card>

      <Card variant="elevated">
        <Card.Body>
          <h3>Elevated Card</h3>
          <p>This card has an elevated appearance with shadow.</p>
        </Card.Body>
      </Card>
    </div>
  );
}
Open on CodeSandboxOpen Sandbox

Anatomy

Understanding the structure of the Card component helps ensure proper implementation and customization.

Anatomy data not yet defined for this component. Define anatomy in the component contract file (Card.contract.json).

Variants & States

import React from 'react';
import Card from './components/Card';
import Button from './components/Button';
import Avatar from './components/Avatar';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1.5rem' }}>
      <Card>
        <Card.Header>
          <h3>Simple Card</h3>
        </Card.Header>
        <Card.Body>
          <p>This is a basic card with header and body content.</p>
        </Card.Body>
      </Card>

      <Card>
        <Card.Header>
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
            <Avatar size="small" initials="DR" />
            <div>
              <h4 style={{ margin: 0 }}>Darian Rosebrook</h4>
              <p style={{ margin: 0, fontSize: '0.875rem', opacity: 0.7 }}>2 hours ago</p>
            </div>
          </div>
        </Card.Header>
        <Card.Body>
          <p>Card with avatar and metadata in the header.</p>
        </Card.Body>
        <Card.Footer>
          <div style={{ display: 'flex', gap: '0.5rem' }}>
            <Button size="small" variant="secondary">Like</Button>
            <Button size="small" variant="secondary">Share</Button>
          </div>
        </Card.Footer>
      </Card>

      <Card variant="elevated">
        <Card.Body>
          <h3>Elevated Card</h3>
          <p>This card has an elevated appearance with shadow.</p>
        </Card.Body>
      </Card>
    </div>
  );
}
Open on CodeSandboxOpen Sandbox

API Reference

Props

NameTypeRequiredDefaultDescription
interactivebooleanNofalse—

Accessibility

Standards Compliance

This component follows WCAG 2.1 AA guidelines and includes proper ARIA attributes, keyboard navigation, and screen reader support.

Common Pitfalls

  • Too many layout permutations
  • inconsistent spacing.

Accessibility Checklist

  • ○ Keyboard navigation support
  • ○ Screen reader compatibility
  • ○ Color contrast compliance
  • ○ Focus management
  • ○ ARIA attributes
  • ○ Reduced motion support

Usage Guidelines

✓ Do

  • Use consistent spacing and sizing
  • Follow established patterns
  • Provide clear labels and descriptions
  • Test with assistive technologies

✗ Don't

  • Override core functionality
  • Use without proper context
  • Ignore accessibility requirements
  • Modify without design system approval

Examples

Basic Usage

Simple implementation with default props and common configurations.

import React from 'react';
import Card from './components/Card';
import Button from './components/Button';
import Avatar from './components/Avatar';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1.5rem' }}>
      <Card>
        <Card.Header>
          <h3>Simple Card</h3>
        </Card.Header>
        <Card.Body>
          <p>This is a basic card with header and body content.</p>
        </Card.Body>
      </Card>

      <Card>
        <Card.Header>
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
            <Avatar size="small" initials="DR" />
            <div>
              <h4 style={{ margin: 0 }}>Darian Rosebrook</h4>
              <p style={{ margin: 0, fontSize: '0.875rem', opacity: 0.7 }}>2 hours ago</p>
            </div>
          </div>
        </Card.Header>
        <Card.Body>
          <p>Card with avatar and metadata in the header.</p>
        </Card.Body>
        <Card.Footer>
          <div style={{ display: 'flex', gap: '0.5rem' }}>
            <Button size="small" variant="secondary">Like</Button>
            <Button size="small" variant="secondary">Share</Button>
          </div>
        </Card.Footer>
      </Card>

      <Card variant="elevated">
        <Card.Body>
          <h3>Elevated Card</h3>
          <p>This card has an elevated appearance with shadow.</p>
        </Card.Body>
      </Card>
    </div>
  );
}
Open on CodeSandboxOpen Sandbox

Advanced Usage

Complex patterns including composition, state management, and real-world scenarios.

import React from 'react';
import Card from './components/Card';
import Button from './components/Button';
import Avatar from './components/Avatar';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1.5rem' }}>
      <Card>
        <Card.Header>
          <h3>Simple Card</h3>
        </Card.Header>
        <Card.Body>
          <p>This is a basic card with header and body content.</p>
        </Card.Body>
      </Card>

      <Card>
        <Card.Header>
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
            <Avatar size="small" initials="DR" />
            <div>
              <h4 style={{ margin: 0 }}>Darian Rosebrook</h4>
              <p style={{ margin: 0, fontSize: '0.875rem', opacity: 0.7 }}>2 hours ago</p>
            </div>
          </div>
        </Card.Header>
        <Card.Body>
          <p>Card with avatar and metadata in the header.</p>
        </Card.Body>
        <Card.Footer>
          <div style={{ display: 'flex', gap: '0.5rem' }}>
            <Button size="small" variant="secondary">Like</Button>
            <Button size="small" variant="secondary">Share</Button>
          </div>
        </Card.Footer>
      </Card>

      <Card variant="elevated">
        <Card.Body>
          <h3>Elevated Card</h3>
          <p>This card has an elevated appearance with shadow.</p>
        </Card.Body>
      </Card>
    </div>
  );
}
Open on CodeSandboxOpen Sandbox

Development Tools

Use these tools to analyze the component's performance, design tokens, and accessibility during development.

Contribute

Help us improve the Card component documentation. Found an issue or have suggestions?

Edit this pageReport an issueContribution guidelines

Related Components

Avatar

User representation (image/initials).

Display • compounds

Chip

Label + optional dismiss.

Display • compounds

Divider

Visual separator.

Display • primitives

Icon

Scalable glyph.

Display • primitives

Image

Displays media.

Display • primitives

ListItem

Item with primary/secondary text and optional icon.

Display • compounds