Card

The example below loads live from Storybook; open it in Storybook for the controls.

Live example, StorybookOpen in Storybook

Default

A Card has a header, description, content and footer. The default Card is outlined with 16 px padding. A Card with a title is a region (<section>) named by that title.

Card title

Card description goes here.

Card content goes here. It keeps related information and actions together.

Primary buttonSecondary button

LightDark

Copy code

import { Button, Card } from '@bigbang/ui';

export default function Default() {
  return (
    <Card className="w-full max-w-96">
      <Card.Header>
        <Card.Title>Card title</Card.Title>
        <Card.Description>Card description goes here.</Card.Description>
      </Card.Header>
      <Card.Body>Card content goes here. It keeps related information and actions together.</Card.Body>
      <Card.Footer>
        <Button size="sm">Primary button</Button>
        <Button size="sm" variant="secondary">
          Secondary button
        </Button>
      </Card.Footer>
    </Card>
  );
}

Variants

There are three variants. outlined suits most screens. elevated shows the card sits above the page; in dark mode the surface colour separates it instead of the shadow. filled is a tinted surface without a border, for a secondary group inside a card.

Outlined card

Card description goes here.

Elevated card

Card description goes here.

Filled card

Card description goes here.

LightDark

Copy code

import { Card } from '@bigbang/ui';

export default function Variants() {
  return (
    <div className="grid w-full gap-xl md:grid-cols-3">
      <Card variant="outlined">
        <Card.Title>Outlined card</Card.Title>
        <Card.Description>Card description goes here.</Card.Description>
      </Card>
      <Card variant="elevated">
        <Card.Title>Elevated card</Card.Title>
        <Card.Description>Card description goes here.</Card.Description>
      </Card>
      <Card variant="filled">
        <Card.Title>Filled card</Card.Title>
        <Card.Description>Card description goes here.</Card.Description>
      </Card>
    </div>
  );
}

Padding

padding sets the inner padding and the gap between parts: sm is 12 px, md is 16 px, lg is 24 px. Use md for cards side by side in a grid, lg for a single card on a page and sm in dense lists and side panels.

Small padding

Card content goes here. It keeps related information and actions together.

Medium padding

Card content goes here. It keeps related information and actions together.

Large padding

Card content goes here. It keeps related information and actions together.

LightDark

Copy code

import { Card } from '@bigbang/ui';

export default function Padding() {
  return (
    <div className="flex w-full flex-wrap items-start gap-xl">
      <Card padding="sm" className="w-72">
        <Card.Title>Small padding</Card.Title>
        <Card.Body>Card content goes here. It keeps related information and actions together.</Card.Body>
      </Card>
      <Card padding="md" className="w-72">
        <Card.Title>Medium padding</Card.Title>
        <Card.Body>Card content goes here. It keeps related information and actions together.</Card.Body>
      </Card>
      <Card padding="lg" className="w-72">
        <Card.Title>Large padding</Card.Title>
        <Card.Body>Card content goes here. It keeps related information and actions together.</Card.Body>
      </Card>
    </div>
  );
}

Header action and footer

Card.Actions aligns to the end of the header row; it holds one action that belongs to the whole card, such as edit. Card.Footer holds the main actions, or status and secondary information, on a tinted band with a top rule across the card.

Card title

Card description goes here.

Edit

Card content goes here. It keeps related information and actions together.

ActiveSecondary text

LightDark

Copy code

import { Badge, Button, Card } from '@bigbang/ui';

export default function WithActions() {
  return (
    <Card className="w-full max-w-md">
      <Card.Header>
        <Card.Title>Card title</Card.Title>
        <Card.Description>Card description goes here.</Card.Description>
        <Card.Actions>
          <Button size="sm" variant="tertiary">
            Edit
          </Button>
        </Card.Actions>
      </Card.Header>
      <Card.Body>Card content goes here. It keeps related information and actions together.</Card.Body>
      <Card.Footer>
        <Badge tone="success">Active</Badge>
        <span className="type-body-sm text-fg-subtle">Secondary text</span>
      </Card.Footer>
    </Card>
  );
}

Interactive

With interactive, the whole card opens one destination. Put one Card.Link in the title: its hit area stretches over the card, the card rises 2 px on hover, and keyboard focus shows the ring around the card. Put any other action in Card.Actions or Card.Footer; it stays clickable as its own tab stop.

First card

Card description goes here.

Active

Second card

Card description goes here.

Third card

Card description goes here.

LightDark

Copy code

import { Badge, Card } from '@bigbang/ui';

export default function Interactive() {
  return (
    <div className="grid w-full gap-xl md:grid-cols-3">
      <Card interactive>
        <Card.Header>
          <Card.Title>
            <Card.Link href="#first">First card</Card.Link>
          </Card.Title>
          <Card.Description>Card description goes here.</Card.Description>
        </Card.Header>
        <Card.Footer>
          <Badge tone="success" size="sm">
            Active
          </Badge>
        </Card.Footer>
      </Card>
      <Card interactive variant="elevated">
        <Card.Header>
          <Card.Title>
            <Card.Link href="#second">Second card</Card.Link>
          </Card.Title>
          <Card.Description>Card description goes here.</Card.Description>
        </Card.Header>
      </Card>
      <Card interactive variant="filled">
        <Card.Header>
          <Card.Title>
            <Card.Link href="#third">Third card</Card.Link>
          </Card.Title>
          <Card.Description>Card description goes here.</Card.Description>
        </Card.Header>
      </Card>
    </div>
  );
}

Light and dark mode

Card takes every colour from surface and border tokens. In dark mode shadow-raised is zero, so the surface colour separates an elevated card.

Light

Outlined card

Card description goes here.

Elevated card

Card description goes here.

Filled card

Card description goes here.

Dark

Outlined card

Card description goes here.

Elevated card

Card description goes here.

Filled card

Card description goes here.

Copy code

import { Card } from '@bigbang/ui';

export default function Variants() {
  return (
    <div className="grid w-full gap-xl md:grid-cols-3">
      <Card variant="outlined">
        <Card.Title>Outlined card</Card.Title>
        <Card.Description>Card description goes here.</Card.Description>
      </Card>
      <Card variant="elevated">
        <Card.Title>Elevated card</Card.Title>
        <Card.Description>Card description goes here.</Card.Description>
      </Card>
      <Card variant="filled">
        <Card.Title>Filled card</Card.Title>
        <Card.Description>Card description goes here.</Card.Description>
      </Card>
    </div>
  );
}