Card
Use the card component to display information in a compact way and link to other internal pages.
On this page
On this page
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 cta text defaults to Learn more and can be customized using the ctaText component.
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 in 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 corrosponds to the nearest active, primary accent color. The color can 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 component to stack multiple cards horizontally or vertically.
Component props
Card
| 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 |
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''blue''coral''green''gray''indigo''lemon''lime''orange''pink''purple''red''teal''yellow' | 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''blue''coral''green''gray''indigo''lemon''lime''orange''pink''purple''red''teal''yellow''blue-purple''green-blue''pink-blue''purple-red''red-orange''green-blue-purple' | default | false | The color of the label |
Card.Heading
| name | type | default | required | description |
|---|---|---|---|---|
as | h2, h3, h4, h5, h6 | h3 | false | |
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 pillar component |
id, className and ref are forwarded by default to all children.