@primer/react-brand/docs/components/Card/react.md

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

---
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"` when the card should present an icon-only call to action instead of the default text-plus-arrow treatment.

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

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

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