Card
Display content in a styled container with optional links and icons.
Use the Card component to present content in a bordered container. Cards work well for feature highlights, navigation links, and content grids.
<Card title="Getting started">
Learn how to set up your first documentation project.
</Card>Learn how to set up your first documentation project.
Add an href prop to make the entire card clickable. An arrow indicator appears automatically:
<Card title="Quickstart guide" href="/quickstart">
Set up a documentation site in under five minutes.
</Card>Set up a documentation site in under five minutes.
Use the cta prop to display a text label at the bottom of the card:
<Card title="Custom domains" href="/features/custom-domains" cta="Learn more">
Serve your docs from your own domain with automatic SSL.
</Card>Serve your docs from your own domain with automatic SSL.
Combine cards with Columns to create a responsive grid:
<Columns cols={2}>
<Card title="CLI reference" href="/cli/overview">
Commands for building and deploying docs.
</Card>
<Card title="Configuration" href="/configuration/docs-json">
Customize your project settings.
</Card>
<Card title="MDX basics" href="/content/mdx-basics"
Commands for building and deploying docs.
Customize your project settings.
Write documentation with Markdown and JSX.
Full-text search built into every project.
Set horizontal to arrange the icon and content side by side:
<Card title="Horizontal card" horizontal>
Content flows beside the icon in a horizontal layout.
</Card>Content flows beside the icon in a horizontal layout.
img| string |
| Image URL displayed at the top of the card. |
| Optional |
cta | string | Call-to-action text displayed at the bottom. | Optional |
children | ReactNode | Card body content. | Optional |