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.

3 contributors

<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>
      <PeopleIcon size={16} /> 3 contributors
    </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>
      <PeopleIcon size={16} /> 3 contributors
    </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>

With action

Use Card.Action to place a single interactive control in the top-right corner of the card. The control label should include card context.

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.Action>
      <ActionMenu>
        <ActionMenu.Anchor>
          <IconButton icon={KebabHorizontalIcon} aria-label="More options for primer/react" variant="invisible" />
        </ActionMenu.Anchor>
        <ActionMenu.Overlay>
          <ActionList>
            <ActionList.Item>Star</ActionList.Item>
            <ActionList.Item>Watch</ActionList.Item>
            <ActionList.Item>Fork</ActionList.Item>
          </ActionList>
        </ActionMenu.Overlay>
      </ActionMenu>
    </Card.Action>
  </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.Action>
      <ActionMenu>
        <ActionMenu.Anchor>
          <IconButton icon={KebabHorizontalIcon} aria-label="More options for primer/react" variant="invisible" />
        </ActionMenu.Anchor>
        <ActionMenu.Overlay>
          <ActionList>
            <ActionList.Item>Star</ActionList.Item>
            <ActionList.Item>Watch</ActionList.Item>
            <ActionList.Item>Fork</ActionList.Item>
          </ActionList>
        </ActionMenu.Overlay>
      </ActionMenu>
    </Card.Action>
  </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>

Semantic section

Set as="section" when the card should be exposed as a standalone landmark. When used this way, Card.Heading is automatically wired to the section with aria-labelledby.

primer/react

This card is rendered as a section landmark and uses its heading for accessible labeling.

<div style={{maxWidth: '400px'}}>
  <Card as="section">
    <Card.Icon icon={RepoIcon} />
    <Card.Heading>primer/react</Card.Heading>
    <Card.Description>
      This card is rendered as a section landmark and uses its heading for accessible labeling.
    </Card.Description>
  </Card>
</div>

<div style={{maxWidth: '400px'}}>
  <Card as="section">
    <Card.Icon icon={RepoIcon} />
    <Card.Heading>primer/react</Card.Heading>
    <Card.Description>
      This card is rendered as a section landmark and uses its heading for accessible labeling.
    </Card.Description>
  </Card>
</div>

In a list

When rendering a collection of cards, place each Card inside an <li> so the list provides grouping. See the accessibility guidance for details on semantics and labelling interactive controls.

primer/react
primer/css
primer/octicons

<ul
  aria-label="Repositories"
  style={{
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
    margin: 0,
    padding: 0,
    listStyle: 'none',
    maxWidth: '400px',
  }}
>
  <li>
    <Card>
      <Card.Icon icon={RepoIcon} />
      <Card.Description>primer/react</Card.Description>
      <Card.Metadata>
        <Button leadingVisual={StarIcon} size="small">
          Star <VisuallyHidden>primer/react</VisuallyHidden>
        </Button>
        <Button leadingVisual={RepoForkedIcon} size="small">
          Fork <VisuallyHidden>primer/react</VisuallyHidden>
        </Button>
      </Card.Metadata>
    </Card>
  </li>
  <li>
    <Card>
      <Card.Icon icon={RepoIcon} />
      <Card.Description>primer/css</Card.Description>
      <Card.Metadata>
        <Button leadingVisual={StarIcon} size="small">
          Star <VisuallyHidden>primer/css</VisuallyHidden>
        </Button>
        <Button leadingVisual={RepoForkedIcon} size="small">
          Fork <VisuallyHidden>primer/css</VisuallyHidden>
        </Button>
      </Card.Metadata>
    </Card>
  </li>
  <li>
    <Card>
      <Card.Icon icon={RepoIcon} />
      <Card.Description>primer/octicons</Card.Description>
      <Card.Metadata>
        <Button leadingVisual={StarIcon} size="small">
          Star <VisuallyHidden>primer/octicons</VisuallyHidden>
        </Button>
        <Button leadingVisual={RepoForkedIcon} size="small">
          Fork <VisuallyHidden>primer/octicons</VisuallyHidden>
        </Button>
      </Card.Metadata>
    </Card>
  </li>
</ul>

<ul
  aria-label="Repositories"
  style={{
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
    margin: 0,
    padding: 0,
    listStyle: 'none',
    maxWidth: '400px',
  }}
>
  <li>
    <Card>
      <Card.Icon icon={RepoIcon} />
      <Card.Description>primer/react</Card.Description>
      <Card.Metadata>
        <Button leadingVisual={StarIcon} size="small">
          Star <VisuallyHidden>primer/react</VisuallyHidden>
        </Button>
        <Button leadingVisual={RepoForkedIcon} size="small">
          Fork <VisuallyHidden>primer/react</VisuallyHidden>
        </Button>
      </Card.Metadata>
    </Card>
  </li>
  <li>
    <Card>
      <Card.Icon icon={RepoIcon} />
      <Card.Description>primer/css</Card.Description>
      <Card.Metadata>
        <Button leadingVisual={StarIcon} size="small">
          Star <VisuallyHidden>primer/css</VisuallyHidden>
        </Button>
        <Button leadingVisual={RepoForkedIcon} size="small">
          Fork <VisuallyHidden>primer/css</VisuallyHidden>
        </Button>
      </Card.Metadata>
    </Card>
  </li>
  <li>
    <Card>
      <Card.Icon icon={RepoIcon} />
      <Card.Description>primer/octicons</Card.Description>
      <Card.Metadata>
        <Button leadingVisual={StarIcon} size="small">
          Star <VisuallyHidden>primer/octicons</VisuallyHidden>
        </Button>
        <Button leadingVisual={RepoForkedIcon} size="small">
          Fork <VisuallyHidden>primer/octicons</VisuallyHidden>
        </Button>
      </Card.Metadata>
    </Card>
  </li>
</ul>

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'}}>
      <h3 style={{margin: 0}}>Custom Content Card</h3>
      <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'}}>
      <h3 style={{margin: 0}}>Custom Content Card</h3>
      <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>

Name	Default	Description
children Required		`React.ReactNode` The contents of the card. Provide either `Card.*` subcomponents (for example `Card.Heading`, `Card.Description`, `Card.Metadata`) or any custom content. A card with no children will not render.
className		`string` CSS class name(s) for custom styling.
padding	`'normal'`	`'none' \| 'condensed' \| 'normal'` Controls the internal padding of the Card.
borderRadius	`'large'`	`'medium' \| 'large'` Controls the border radius of the Card.
as	`'div'`	`'div' \| 'section'` The HTML element to render. Use `'section'` for standalone Cards (not inside a list of cards) so screen readers announce the Card as a labelled region. When `Card.Heading` is present, `aria-labelledby` is automatically wired. Use the default `'div'` when the Card is inside an `<li>` of a list of cards.

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. When the parent Card uses `as="section"`, the heading's `id` is automatically wired to the section's `aria-labelledby`.

Card.Description

Name	Default	Description
children Required		`React.ReactNode` The descriptive text for the card. Rendered inside a `<p>` element so should be flowing text content.

Card.Action

Name	Default	Description
children Required		`React.ReactNode` Interactive control for the top-right corner of the card.

Card.Metadata

Name	Default	Description
children Required		`React.ReactNode` Metadata content for the bottom of the card. Accepts any content: plain text, icons, or other Primer components.

Card

Page navigation navigation

React examples

Default

Card Heading

With image

Card with Image

With metadata

primer/react

With action

primer/react

Padding

Normal padding

Condensed padding

No padding

Semantic section

primer/react

In a list

Custom content

Custom Content Card

More code examples

Props

Card

Card.Icon

Card.Image

Card.Heading

Card.Description

Card.Action

Card.Metadata