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.
Minimal
The minimal card variant applies alternative presentation to the default card.
CTA text
The call to action text defaults to Learn more and can be customized using the ctaText property.
Use ctaVariant="none" when the card should remain fully clickable without visible CTA text or arrow.
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.
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.
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.
Use Card.Tokens to display one or more Token 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.
Label
Use Card.Label for displaying one short label above the heading.
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.
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.
Tokens
Use Card.Tokens to display one or more Token components.
Component props
Card Required
| name | type | default | required | description |
|---|---|---|---|---|
align | 'start''center' | '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, 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, 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, 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.