Cards

Link grids for landing pages, overviews, and "next steps" sections.

Cards lays out a responsive grid: one column on small screens and two columns from 768px up. Each Card is a bordered link with a title, an optional description, and an optional icon.

Usage#

Installation

Add the package and the four route files.

Configuration

Every field in docs.config.ts.

mdx

<Cards>
  <Card
    title="Installation"
    href="/getting-started/installation"
    description="Add the package and the four route files."
  />
  <Card
    title="Configuration"
    href="/guides/configuration"
    description="Every field in docs.config.ts."
  />
</Cards>

With icons#

Pass any React node as icon. It renders at the top-left of the card above the title. Inline SVG works well because it inherits currentColor.

Theming

Override design tokens from your own stylesheet.

Source API

Read pages, trees, and the search index on the server.

mdx

<Cards>
  <Card
    title="Theming"
    href="/guides/theming"
    description="Override design tokens from your own stylesheet."
    icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <circle cx="12" cy="12" r="10" />
      <path d="M12 2a7 7 0 0 0 0 20" />
    </svg>}
  />
</Cards>

Without a link#

A card without href renders as a static box. Use it for feature summaries that do not navigate anywhere.

Zero config highlighting

Dual light and dark syntax themes with no setup.

Static by default

Every page is pre-rendered through generateStaticParams.

mdx

<Cards>
  <Card title="Zero config highlighting" description="Dual light and dark syntax themes with no setup." />
  <Card title="Static by default" description="Every page is pre-rendered through generateStaticParams." />
</Cards>

Props#

Cards#

Prop	Type	Description
`children`	`ReactNode`	One or more `Card` elements.

Card#

Prop	Type	Description
`title`	`ReactNode`	Card heading. Required.
`description`	`ReactNode`	Muted supporting text under the title.
`href`	`string`	Destination. When set, the whole card is a link.
`icon`	`ReactNode`	Rendered above the title.
`children`	`ReactNode`	Extra content rendered below the description.