Card
Add a bordered tile with a title, body text, icon, and link to another page.
Use a card as a navigational tile to another page. Write the card's text as its content. Wrap multiple cards in <Columns> to lay them out in a responsive grid.
<Card title="Quickstart" href="/quickstart" icon="rocket">
Get from zero to a live docs site in under five minutes.
</Card>Props
| Prop | Type | Default |
|---|---|---|
title | string | None |
href | string (absolute URL or path starting with /) | None |
icon | Icon name | "default" |
iconColor | "gray" | "green" | "yellow" | "red" | "orange" | "blue" | "gray" |
cta | string (link label when href is set) | "Go to content" |
The description prop is deprecated. It still renders, so existing pages keep
working, but write the card's text as its content instead.
Variants
With icon
<Card title="Editor overview" href="/editor/overview" icon="note">
Tour the editor layout and the save-and-publish flow.
</Card>With icon color
<Card
title="Deployments"
href="/publishing/deployments"
icon="rocket"
iconColor="blue"
>
Every push to the default branch ships.
</Card>Custom CTA
<Card
title="Connect GitHub"
href="/publishing/connect-github"
icon="branch"
cta="Set it up"
>
Install the GitHub App and link a repo.
</Card>Card group
Wrap two or more cards in <Columns> to lay them out in a responsive grid. Columns collapse on narrow screens.
Editor overview
Go to contentComponents
Go to content<Columns cols="2">
<Card title="Editor overview" href="/editor/overview" icon="pencil" />
<Card title="Components" href="/editor/components" icon="component" />
</Columns>