Card

Use the Card component to display information in a compact way and link to other internal pages.

Experimental
Not reviewed for accessibility

On this page

import {Card} from '@primer/react-brand'

Examples

Default

The default card displays a heading and description. The link text defaults to Read more, but can be customized using the label prop.

<Card href="https://github.com">
  <Card.Heading>Collaboration is the key to DevOps success</Card.Heading>
  <Card.Description>
    Everything you need to know about getting started with GitHub Actions.
  </Card.Description>
</Card>

<Card href="https://github.com">
  <Card.Heading>Collaboration is the key to DevOps success</Card.Heading>
  <Card.Description>
    Everything you need to know about getting started with GitHub Actions.
  </Card.Description>
</Card>

Cta text

The cta text defaults to Learn more and can be customized using the ctaText component.

<Card ctaText="Discover how" href="https://github.com">
  <Card.Heading>Collaboration is the key to DevOps success</Card.Heading>
  <Card.Description>
    Everything you need to know about getting started with GitHub Actions.
  </Card.Description>
</Card>

<Card ctaText="Discover how" href="https://github.com">
  <Card.Heading>Collaboration is the key to DevOps success</Card.Heading>
  <Card.Description>
    Everything you need to know about getting started with GitHub Actions.
  </Card.Description>
</Card>

Label

Use the Label to add metadata to the Card. The Label is optional and can be used to indicate the status of the content.

<Card href="https://github.com">
  <Card.Label>Limited</Card.Label>
  <Card.Heading>Code search & code view</Card.Heading>
  <Card.Description>
    Enables you to rapidly search, navigate, and understand code, right from
    GitHub.com.
  </Card.Description>
</Card>

<Card href="https://github.com">
  <Card.Label>Limited</Card.Label>
  <Card.Heading>Code search & code view</Card.Heading>
  <Card.Description>
    Enables you to rapidly search, navigate, and understand code, right from
    GitHub.com.
  </Card.Description>
</Card>

Stacked cards

Use the Stack component to stack multiple cards horizontally or vertically.

<Stack
  direction="horizontal"
  alignItems="center"
  justifyContent="center"
  gap="normal"
>
  <Card href="https://github.com">
    <Card.Heading>Heading</Card.Heading>
    <Card.Description>
      Everything you need to know about getting started with GitHub Actions.
    </Card.Description>
  </Card>
  <Card href="https://github.com">
    <Card.Heading>Heading</Card.Heading>
    <Card.Description>
      Everything you need to know about getting started with GitHub Actions.
    </Card.Description>
  </Card>
  <Card href="https://github.com">
    <Card.Heading>Heading</Card.Heading>
    <Card.Description>
      Everything you need to know about getting started with GitHub Actions.
    </Card.Description>
  </Card>
</Stack>

<Stack
  direction="horizontal"
  alignItems="center"
  justifyContent="center"
  gap="normal"
>
  <Card href="https://github.com">
    <Card.Heading>Heading</Card.Heading>
    <Card.Description>
      Everything you need to know about getting started with GitHub Actions.
    </Card.Description>
  </Card>
  <Card href="https://github.com">
    <Card.Heading>Heading</Card.Heading>
    <Card.Description>
      Everything you need to know about getting started with GitHub Actions.
    </Card.Description>
  </Card>
  <Card href="https://github.com">
    <Card.Heading>Heading</Card.Heading>
    <Card.Description>
      Everything you need to know about getting started with GitHub Actions.
    </Card.Description>
  </Card>
</Stack>

Component props

Card

name	type	default	required	description
`href`	`string`		`true`	URL to the card content
`ctaText`	`string`	`Read more`	`false`	Label of the link at the bottom of the Card

Card.Heading

name	type	default	required	description
`as`	`h2`, `h3`, `h4`, `h5`, `h6`	`h3`	`false`

Edit this page on GitHub