AI agents: fetch the documentation index at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.
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.
Basic card
<Card title="Getting started">
Learn how to set up your first documentation project.
</Card>Learn how to set up your first documentation project.
Link card
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.
Card with call to action
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.
Card grid
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">
Write documentation with Markdown and JSX.
</Card>
<Card title="Search" href="/features/search">
Full-text search built into every project.
</Card>
</Columns>Commands for building and deploying docs.
Customize your project settings.
Write documentation with Markdown and JSX.
Full-text search built into every project.
Horizontal layout
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.