Card

Use the Card component to display information in a compact way and link to other internal pages.
  • Experimental
  • Not reviewed for accessibility
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.

Cta text

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

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.

Stacked cards

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

Component props

Card

nametypedefaultrequireddescription
hrefstringtrueURL to the card content
ctaTextstringRead morefalseLabel of the link at the bottom of the Card

Card.Heading

nametypedefaultrequireddescription
ash2, h3, h4, h5, h6h3false