Card

Present features, links, and related pages in Card containers, alone or in grids, with optional icons and hrefs for clearer docs navigation.

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>

Getting started

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:

Published with Blode.md

Card · Blode.md

<Card title="Quickstart guide" href="/quickstart">
  Set up a documentation site in under five minutes.
</Card>


<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>

Field	Type	Description	Required
`title`	string	Heading displayed at the top of the card.	Optional
`icon`	ReactNode	Icon rendered above the title.	Optional
`color`	string	Custom color for the icon.	Optional
`href`	string	URL that makes the card clickable. External links open in a new tab.	Optional
`horizontal`	boolean	Arrange icon and content side by side.	Optional
`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

Card

Basic card

Link card

Card

Basic card

Link card

Card with call to action

Card grid

Horizontal layout

Props