Card

Card is a styled container component with border, box-shadow, and border-radius that groups related content. It supports structured layouts with subcomponents or custom content.

Page navigation navigation

React

experimental

Storybook|Source|Usage

Figma

View in Figma

React examples

Default

A basic Card with an icon, heading, description, and metadata.

Card Heading

This is a description of the card providing supplemental information.

Updated 2 hours ago

<div style={{maxWidth: '400px'}}>
  <Card>
    <Card.Icon icon={RocketIcon} />
    <Card.Heading>Card Heading</Card.Heading>
    <Card.Description>This is a description of the card providing supplemental information.</Card.Description>
    <Card.Metadata>Updated 2 hours ago</Card.Metadata>
  </Card>
</div>

<div style={{maxWidth: '400px'}}>
  <Card>
    <Card.Icon icon={RocketIcon} />
    <Card.Heading>Card Heading</Card.Heading>
    <Card.Description>This is a description of the card providing supplemental information.</Card.Description>
    <Card.Metadata>Updated 2 hours ago</Card.Metadata>
  </Card>
</div>

With image

Use Card.Image to render an edge-to-edge image in the card header instead of an icon.

Card with Image

This card uses an edge-to-edge image instead of an icon.

<div style={{maxWidth: '400px'}}>
  <Card>
    <Card.Image src="https://github.com/octocat.png" alt="Octocat" />
    <Card.Heading>Card with Image</Card.Heading>
    <Card.Description>This card uses an edge-to-edge image instead of an icon.</Card.Description>
  </Card>
</div>

<div style={{maxWidth: '400px'}}>
  <Card>
    <Card.Image src="https://github.com/octocat.png" alt="Octocat" />
    <Card.Heading>Card with Image</Card.Heading>
    <Card.Description>This card uses an edge-to-edge image instead of an icon.</Card.Description>
  </Card>
</div>

With metadata

Use Card.Metadata to display supplemental metadata content below the description.

primer/react

GitHub's design system implemented as React components for building consistent user interfaces.

1.2k stars

<div style={{maxWidth: '400px'}}>
  <Card>
    <Card.Icon icon={RepoIcon} />
    <Card.Heading>primer/react</Card.Heading>
    <Card.Description>
      {"GitHub's design system implemented as React components for building consistent user interfaces."}
    </Card.Description>
    <Card.Metadata>
      <StarIcon size={16} />
      1.2k stars
    </Card.Metadata>
  </Card>
</div>

<div style={{maxWidth: '400px'}}>
  <Card>
    <Card.Icon icon={RepoIcon} />
    <Card.Heading>primer/react</Card.Heading>
    <Card.Description>
      {"GitHub's design system implemented as React components for building consistent user interfaces."}
    </Card.Description>
    <Card.Metadata>
      <StarIcon size={16} />
      1.2k stars
    </Card.Metadata>
  </Card>
</div>

Padding

The padding prop controls the internal padding of the Card. Available values: normal (default), condensed, and none.

Normal padding

This card uses the default normal padding.

Condensed padding

This card uses condensed padding.

No padding

This card uses no padding.

<Stack direction="horizontal" gap="normal">
  <div style={{maxWidth: '300px'}}>
    <Card padding="normal">
      <Card.Icon icon={RocketIcon} />
      <Card.Heading>Normal padding</Card.Heading>
      <Card.Description>This card uses the default normal padding.</Card.Description>
    </Card>
  </div>
  <div style={{maxWidth: '300px'}}>
    <Card padding="condensed">
      <Card.Icon icon={RocketIcon} />
      <Card.Heading>Condensed padding</Card.Heading>
      <Card.Description>This card uses condensed padding.</Card.Description>
    </Card>
  </div>
  <div style={{maxWidth: '300px'}}>
    <Card padding="none">
      <Card.Icon icon={RocketIcon} />
      <Card.Heading>No padding</Card.Heading>
      <Card.Description>This card uses no padding.</Card.Description>
    </Card>
  </div>
</Stack>

<Stack direction="horizontal" gap="normal">
  <div style={{maxWidth: '300px'}}>
    <Card padding="normal">
      <Card.Icon icon={RocketIcon} />
      <Card.Heading>Normal padding</Card.Heading>
      <Card.Description>This card uses the default normal padding.</Card.Description>
    </Card>
  </div>
  <div style={{maxWidth: '300px'}}>
    <Card padding="condensed">
      <Card.Icon icon={RocketIcon} />
      <Card.Heading>Condensed padding</Card.Heading>
      <Card.Description>This card uses condensed padding.</Card.Description>
    </Card>
  </div>
  <div style={{maxWidth: '300px'}}>
    <Card padding="none">
      <Card.Icon icon={RocketIcon} />
      <Card.Heading>No padding</Card.Heading>
      <Card.Description>This card uses no padding.</Card.Description>
    </Card>
  </div>
</Stack>

Custom content

When no subcomponents (Card.Icon, Card.Heading, etc.) are used, Card renders as a plain styled container with your arbitrary children.

Custom Content Card

This card uses arbitrary custom content instead of the built-in subcomponents.

Item one
Item two
Item three

<div style={{maxWidth: '400px'}}>
  <Card>
    <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
      <strong>Custom Content Card</strong>
      <p style={{margin: 0}}>This card uses arbitrary custom content instead of the built-in subcomponents.</p>
      <ul style={{margin: 0, paddingLeft: '16px'}}>
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
      </ul>
    </div>
  </Card>
</div>

<div style={{maxWidth: '400px'}}>
  <Card>
    <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
      <strong>Custom Content Card</strong>
      <p style={{margin: 0}}>This card uses arbitrary custom content instead of the built-in subcomponents.</p>
      <ul style={{margin: 0, paddingLeft: '16px'}}>
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
      </ul>
    </div>
  </Card>
</div>

More code examples

See the Card Storybook stories

Props

Card

Name	Default	Description
className		`string` CSS class name(s) for custom styling.
padding	`'normal'`	`'none' \| 'condensed' \| 'normal'` Controls the internal padding of the Card.

Card.Icon

Name	Default	Description
icon		`React.ElementType` An Octicon or custom SVG icon to render.
aria-label		`string` Accessible label for the icon. When omitted, the icon is treated as decorative.

Card.Image

Name	Default	Description
src		`string` The image source URL.
alt	`""`	`string` Alt text for accessibility. Defaults to empty string (decorative).

Card.Heading

Name	Default	Description
as	`'h3'`	`'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` The heading level to render.

Card.Description

No props documented

Card.Metadata

No props documented