Card
A bordered tile with title, description, icon, and link for navigating to another page.
Use a card as a navigational tile to another page. Wrap multiple cards in <Columns> to lay them out in a responsive grid.
<Card
title="Quickstart"
href="/quickstart"
icon="rocket"
description="Get from zero to a live docs site in under five minutes."
/>Props
| Prop | Type | Default |
|---|---|---|
title | string | — |
href | string (absolute URL or path starting with /) | — |
description | string | — |
icon | Icon name | "default" |
iconColor | "gray" | "green" | "yellow" | "red" | "orange" | "blue" | "gray" |
cta | string (link label when href is set) | "Go to content" |
Variants
With icon
<Card
title="Editor overview"
href="/editor/overview"
icon="note"
description="Tour the editor layout and the save-and-publish flow."
/>With icon color
<Card
title="Deployments"
href="/publishing/deployments"
icon="rocket"
iconColor="blue"
description="Every push to the default branch ships."
/>Custom CTA
<Card
title="Connect GitHub"
href="/publishing/connect-github"
icon="branch"
cta="Set it up"
description="Install the GitHub App and link a repo."
/>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>