---
title: Card
description: Use the card component to display information in a compact way and link to other internal pages.
keywords: ['card', 'link', 'summary', 'content', 'information']
ready: true
source: https://github.com/primer/brand/blob/main/packages/react/src/Card/Card.tsx
storybook: '/brand/storybook/?path=/story/components-card--playground'
a11yReviewed: true
---

```js
import {Avatar, Box, Card, Grid, Token} from '@primer/react-brand'
```

## Examples

### Default

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

```jsx
<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.

```jsx
<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.

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

Use `ctaVariant="none"` when the card should remain fully clickable without visible CTA text or arrow.

```jsx
<Card href="https://github.com" ctaVariant="none">
  <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>
```

### Arrow CTA

Use `ctaVariant="arrow"` for a compact call to action. On devices that support hover, the label is visually
hidden until the Card is hovered or focused. On devices without hover, the label remains visible so the call
to action does not rely on an unavailable interaction.

Set `disableAnimation` to `true` when CTA state changes should occur without animated transitions.

```jsx
<Card href="https://github.com" ctaVariant="arrow">
  <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>
```

### Border

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.

```jsx
<Card href="https://github.com" hasBorder>
  <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>
```

### Icon

You can add an `icon` to enhance the visual context. We recommend using an [Octicon](https://primer.style/design/foundations/icons). The `Icon` can be customized using the `color` prop and used with or without a background color by using the `hasBackground` prop.
Use `Card.Tokens` to display one or more [Token](../Token/index.md) components below the description. The heading and description still render before the tokens in the DOM, so the reading order stays aligned with the visual order.

```jsx
<Card href="https://github.com">
  <Card.Icon icon={CopilotIcon} 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 `Card.Label` to display a short label above the heading. It renders a `Token` by default. Use
`variant="accent-text"` for eyebrow-style copy.

```jsx
<Card href="https://github.com" ctaVariant="arrow">
  <Card.Label>GitHub Copilot</Card.Label>
  <Card.Heading>Bring the power of generative AI to engineering teams.</Card.Heading>
  <Card.Description>Prioritize speed, depth, or cost by picking the industry-leading model for you.</Card.Description>
</Card>
```

```jsx
<Card href="https://github.com" ctaVariant="arrow">
  <Card.Label variant="accent-text">GitHub Copilot</Card.Label>
  <Card.Heading>Bring the power of generative AI to engineering teams.</Card.Heading>
  <Card.Description>Prioritize speed, depth, or cost by picking the industry-leading model for you.</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`.

```jsx
<>
  <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>
  <Card href="https://github.com">
    <Card.Image
      position="block-end"
      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>
</>
```

### Full-bleed images

When an image should stretch to fill the card width, set `padding="none"` on `Card.Image` and add `hasBorder` to the `Card` for visual containment. Display full-bleed cards in a regular `Grid` with clear gaps between them rather than in a shared gridline frame. Keep the image position and aspect ratio consistent across the group.

```jsx
<Grid>
  {[
    {
      heading: 'Build with GitHub Copilot',
      description: 'Write, review, and understand code with AI-powered assistance.',
      image: '/images/placeholder-1.png',
    },
    {
      heading: 'Automate your workflow',
      description: 'Keep projects moving with tools that fit the way your team works.',
      image: '/images/placeholder-2.png',
    },
    {
      heading: 'Ship secure software',
      description: 'Find and fix vulnerabilities throughout the development lifecycle.',
      image: '/images/placeholder-3.png',
    },
  ].map(card => (
    <Grid.Column key={card.heading} span={{xsmall: 12, large: 4}}>
      <Card href="https://github.com" fullWidth hasBorder ctaVariant="arrow">
        <Card.Heading>{card.heading}</Card.Heading>
        <Card.Description>{card.description}</Card.Description>
        <Card.Image
          position="block-end"
          padding="none"
          src={card.image}
          alt="Abstract gradient illustration"
          aspectRatio="4:3"
        />
      </Card>
    </Grid.Column>
  ))}
</Grid>
```

### Tokens

Use `Card.Tokens` to display more than one [Token](../Token/index.md).

```jsx
<>
  <Card href="https://github.com">
    <Card.Image src="/images/placeholder-1.png" alt="Abstract blue and green gradient illustration" />
    <Card.Heading>Leading tokens</Card.Heading>
    <Card.Description>
      Today, we&apos;re shipping improvements to Dependabot alerts that make them easier to understand and remediate.
    </Card.Description>
    <Card.Tokens position="block-end">
      <Token leadingVisual={<Avatar src="/images/avatar-mona.png" alt="Mona Lisa" size={32} />}>Mona Lisa</Token>
      <Token variant="outline">DEC.25</Token>
    </Card.Tokens>
  </Card>
  <Card href="https://github.com">
    <Card.Image src="/images/placeholder-2.png" alt="Abstract blue and green gradient illustration" />
    <Card.Tokens>
      <Token leadingVisual={<Avatar src="/images/avatar-mona.png" alt="Mona Lisa" size={32} />}>Mona Lisa</Token>
      <Token variant="outline">DEC.25</Token>
    </Card.Tokens>
    <Card.Heading>Trailing tokens</Card.Heading>
    <Card.Description>
      Today, we&apos;re shipping improvements to Dependabot alerts that make them easier to understand and remediate.
    </Card.Description>
  </Card>
</>
```

## Component props

### Card `Required`

| name               | type                              | default      | required | description                                                 |
| ------------------ | --------------------------------- | ------------ | -------- | ----------------------------------------------------------- |
| `align`            |                                   | `'start'`    | `false`  | Aligns the card content                                     |
| `backgroundColor`  | `'default' \| 'subtle' \| 'none'` | `'default'`  | `false`  | Optional background color override for the card             |
| `ctaText`          | `string`                          | `Learn more` | `false`  | Label of the link at the bottom of the card                 |
| `ctaVariant`       | `'text' \| 'arrow' \| 'none'`     | `'text'`     | `false`  | Presentation of the call-to-action area                     |
| `disableAnimation` | `boolean`                         | `false`      | `false`  | Disables transitions and animations within 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                                     |
| `leadingVisual`    | `ReactElement`                    |              | `false`  | Logo or brand mark shown above the card content             |
| `variant`          | `'default' \| 'minimal'`          | `'default'`  | `false`  | The variant of the card                                     |

### Card.Image

Forwards all the props from the [Image component](../Image/index.md), including `src`, `alt`, and `aspectRatio`.

| name       | type                           | default       | required | description                                                       |
| ---------- | ------------------------------ | ------------- | -------- | ----------------------------------------------------------------- |
| `padding`  | `'default' \| 'none'`          | `'default'`   | `false`  | Controls spacing around the image within the card                 |
| `position` | `'block-start' \| 'block-end'` | `block-start` | `false`  | Places the image at the block-start or block-end edge of the card |

### 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                                 |
| ---------- | -------------------------- | ------- | -------- | ------------------------------------------- |
| `children` | `ReactNode`, `ReactNode[]` |         | `true`   | Label content rendered above the heading    |
| `variant`  | `'token' \| 'accent-text'` | `token` | `false`  | Presentation of the label above the heading |

Forwards common span props such as `className`, `id`, and `ref`. `variant="token"` renders a
[Token](../Token/index.md), and `variant="accent-text"` renders EyebrowText
with its accent presentation.

### Card.Tokens

| name       | type                           | default       | required | description                                                    |
| ---------- | ------------------------------ | ------------- | -------- | -------------------------------------------------------------- |
| `children` | `ReactNode`, `ReactNode[]`     |               | `true`   | Tokens rendered inside the card                                |
| `position` | `'block-start' \| 'block-end'` | `block-start` | `false`  | Places tokens at block-start or block-end relative to the copy |

### 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](../../typography/Heading/index.md), 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.