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.
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.
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.
The hasBorder prop has no effect when using the torchlight effect in dark mode. In this case, the border is always rendered.
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.
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.
Icons and Labels
Combine Icon and Label when you need to add more metadata or context to the 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.
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.
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.
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".
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.