Card - Primer

Ready to useReviewed 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.

<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>

Minimal

The minimal card variant applies alternative presentation to the default card.

<Card href="https://github.com" variant="minimal">
  <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 call to action text defaults to Learn more and can be customized using the ctaText property.

<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>

A border can be provided using the hasBorder prop. This will render a border around the Card component giving further separation between the foreground and background. Especially when there is no shadow present on the background.

The hasBorder prop has no effect when using the torchlight effect in dark mode. In this case, the border is always rendered.

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

Icon

You can add an icon to enhance the visual context. We recommend using an Octicon. The Icon can be customized using the color prop and used with or without a background color by using the hasBackground prop.

<Card href="https://github.com">
  <Card.Icon icon={CopilotIcon} color="purple" hasBackground />
  <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>

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. The Label can be customized using the color prop.

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

Icons and Labels

Combine Icon and Label when you need to add more metadata or context to the Card.

<Card href="https://github.com">
  <Card.Icon icon={CopilotIcon} color="green" hasBackground />
  <Card.Label color="blue-purple">Beta</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>

Image

Use the Image component to add an image to the Card. The Image component is optional and provides a visual context to the Card.

<Card href="https://github.com">
  <Card.Image src="/images/placeholder.png" alt="placeholder, blank area with an gray background color" />
  <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>

Torchlight effect

Card components in dark mode feature a unique “torchlight” effect. The color of the lit area corresponds to the nearest active, primary accent color. The color can be modified by changing the value of the respective CSS variable.

<ThemeProvider colorMode="dark">
  <Box backgroundColor="default" padding="condensed">
    <Card
      href="https://github.com"
      fullWidth
      style={{
        ['--brand-color-accent-primary']: 'var(--base-color-scale-lime-2)',
      }}
    >
      <Card.Icon icon={ZapIcon} color="lime" hasBackground />
      <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>
  </Box>
</ThemeProvider>

Image and Label

Combine Image and Label when you need to add more metadata or context to the Card. Use either the Icon or Image as the primary visual context, but not both.

<Card href="https://github.com">
  <Card.Image src="/images/placeholder.png" alt="placeholder, blank area with an gray background color" />
  <Card.Heading>Code search & code view</Card.Heading>
  <Card.Label color="blue">Beta</Card.Label>
  <Card.Description>
    Enables you to rapidly search, navigate, and understand code, right from GitHub.com.
  </Card.Description>
</Card>

Stacked cards

Use the Stack or Grid components to stack up to three cards horizontally in center alignment. Do not use center alignment for 4 or more stacked cards.

Note that in this arrangement, both fullWidth and hasBorder options should be applied alongside align="center".

<Stack
  direction={{
    narrow: 'vertical',
    regular: 'vertical',
    wide: 'horizontal',
  }}
  alignItems="center"
  justifyContent="center"
  gap="normal"
>
  <Card href="https://github.com" hasBorder fullWidth align="center">
    <Card.Icon icon={CopilotIcon} color="indigo" hasBackground />
    <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" hasBorder fullWidth align="center">
    <Card.Icon icon={RocketIcon} color="purple" hasBackground />
    <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 Required

name	type	default	required	description
`ctaText`	`string`	`Read more`	`false`	Label of the link at the bottom of the card
`disableAnimation`	`boolean`	`false`	`false`	A flag to disable the default hover animation effect of the card
`fullWidth`	`boolean`	`false`	`false`	A flag to optionally fill the width of the parent container
`hasBorder`	`boolean`	`false`	`false`	A flag used to provide a border to the card
`href`	`string`		`true`	URL to the card content
`variant`	`'default'`, `'minimal'`	`'default'`	`false`	The variant of the card

Card.Image

Forwards all the props from the Image component, including src, alt, and aspectRatio.

Card.Icon

name	type	default	required	description
`icon`	`React.Node`		`true`	Octicon
`color`	`'default'`, `'subtle'`, `'accent'`, `'success'`, `'attention'`, `'severe'`, `'danger'`, `'open'`, `'closed'`, `'done'`, `'sponsors'`, `'blue'`, `'green'`, `'yellow'`, `'orange'`, `'red'`, `'purple'`, `'pink'`, `'coral'`, `'lime'`, `'indigo'`, `'teal'`	`default`	`false`	The color of the icon
`hasBackground`	`boolean`	`false`	`false`	Adds a filled colored background to the icon

Card.Label

name	type	default	required	description
`color`	`'default'`, `'accent'`, `'success'`, `'attention'`, `'severe'`, `'danger'`, `'open'`, `'closed'`, `'done'`, `'sponsors'`, `'blue'`, `'green'`, `'yellow'`, `'orange'`, `'red'`, `'purple'`, `'pink'`, `'coral'`, `'lime'`, `'indigo'`, `'teal'`, `'blue-purple'`	`default`	`false`	The color of the label

Card.Heading

name	type	default	required	description
`as`	`'h2'`, `'h3'`, `'h4'`, `'h5'`, `'h6'`	`h3`	`false`	The HTML tag to use for the heading
`className`	`string`		`false`	Custom class name for the heading component
`children`	`ReactNode`, `ReactNode[]`	`undefined`	`true`	Content to be displayed inside the heading component

Forwards all the props from the Heading component, including as, size, and weight.

Card.Description

name	type	default	required	description
`children`	`ReactNode`, `ReactNode[]`	`undefined`	`true`	Content to be displayed inside the card component

id, className and ref are forwarded by default to all children.