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" when the card should present an icon-only call to action instead of the default text-plus-arrow treatment.
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 to display a short label above the heading. It renders a Token by default. Use
variant="accent-text" for eyebrow-style copy.
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.
Tokens
Use Card.Tokens to display more than one Token.
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 | 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, 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, 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.