import {Card} from '@primer/react-brand'
The default card displays a heading and description. The link text defaults to Read more
, but can be customized using the label
prop.
<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>
The cta text defaults to Learn more
and can be customized using the ctaText
component.
<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 the Label
to add metadata to the Card
. The Label
is optional and can be used to indicate the status of the content.
<Card href="https://github.com"><Card.Label>Limited</Card.Label><Card.Heading>Code search & code view</Card.Heading><Card.Description>Enables you to rapidly search, navigate, and understand code, right fromGitHub.com.</Card.Description></Card>
Use the Stack
component to stack multiple cards horizontally or vertically.
<Stackdirection="horizontal"alignItems="center"justifyContent="center"gap="normal"><Card href="https://github.com"><Card.Heading>Heading</Card.Heading><Card.Description>Everything you need to know about getting started with GitHub Actions.</Card.Description></Card><Card href="https://github.com"><Card.Heading>Heading</Card.Heading><Card.Description>Everything you need to know about getting started with GitHub Actions.</Card.Description></Card><Card href="https://github.com"><Card.Heading>Heading</Card.Heading><Card.Description>Everything you need to know about getting started with GitHub Actions.</Card.Description></Card></Stack>
name | type | default | required | description |
---|---|---|---|---|
href | string | true | URL to the card content | |
ctaText | string | Read more | false | Label of the link at the bottom of the Card |
name | type | default | required | description |
---|---|---|---|---|
as | h2 , h3 , h4 , h5 , h6 | h3 | false |