Cards

Display content in titled card boxes, arranged in flexible grids with Card and CardGrid.

The <Card> and <CardGrid> components let you present content in titled, bordered boxes arranged in a grid. Unlike LinkGrid, cards don’t require a link — they accept any slot content.

Card

A single card with a required title and an optional icon.

Props:

title (required string) — displayed in the card header
icon (optional string) — an emoji or single character shown before the title

<Card title="Static output" icon="⚡">
  Dustavez generates plain HTML files at build time. No server required — deploy
  to any CDN or static host.
</Card>

Static output

Dustavez generates plain HTML files at build time. No server required — deploy to any CDN or static host.

Cards accept rich slot content — lists, code, and inline formatting all work:

<Card title="Supported locales" icon="🌍">
  Six locales ship by default:

  - `en` — English
  - `fr` — French
  - `es` — Spanish
  - `de` — German
  - `ja` — Japanese
  - `hi` — Hindi
</Card>

Supported locales

Six locales ship by default:

en — English
fr — French
es — Spanish
de — German
ja — Japanese
hi — Hindi

CardGrid

Wraps multiple <Card> components in a responsive grid.

Props:

cols — optional 1 | 2 | 3, default 2

<CardGrid>
  <Card title="MDX" icon="📝">
    Write content in Markdown with full JSX component support.
  </Card>
  <Card title="Search" icon="🔍">
    Client-side full-text search powered by Orama. No server needed.
  </Card>
  <Card title="i18n" icon="🌐">
    Six locales included. Add more by creating locale folders in `content/docs/`.
  </Card>
  <Card title="Theming" icon="🎨">
    All colors are CSS custom properties. Swap the entire palette in one file.
  </Card>
</CardGrid>

MDX

Write content in Markdown with full JSX component support.

Client-side full-text search powered by Orama. No server needed.

i18n

Six locales included. Add more by creating locale folders in content/docs/.

Theming

All colors are CSS custom properties. Swap the entire palette in one file.

Three-column layout

<CardGrid cols={3}>
  <Card title="Fast">Zero runtime JS by default.</Card>
  <Card title="Typed">Full TypeScript support.</Card>
  <Card title="Flexible">Drop in any Astro integration.</Card>
</CardGrid>

Fast

Zero runtime JS by default.

Typed

Full TypeScript support.

Flexible

Drop in any Astro integration.

Single column

<CardGrid cols={1}>
  <Card title="Step 1 — Install">Run `npm create astro` and choose the Dustavez template.</Card>
  <Card title="Step 2 — Configure">Edit `astro.config.ts` and set your site URL.</Card>
  <Card title="Step 3 — Write">Add MDX files to `content/docs/en/` and start writing.</Card>
</CardGrid>

Step 1 — Install

Run npm create astro and choose the Dustavez template.

Step 2 — Configure

Edit astro.config.ts and set your site URL.

Step 3 — Write

Add MDX files to content/docs/en/ and start writing.

Tip

On narrow viewports, CardGrid collapses to a single column regardless of the cols value.

Last updated: April 5, 2026

Edit this page on GitHub

← Previous

File tree

Link buttons