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 Sandbox

Initializing sandbox...

Anatomy

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

Component anatomy diagram will be generated based on the actual component structure.

Variants & States

Disabled

Open Sandbox

Initializing sandbox...

API Reference

Props

Props documentation will be auto-generated from the component implementation.

Methods

Method documentation will be extracted from the component interface.

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

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 Sandbox

Initializing sandbox...

Advanced Usage

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>
  );
}