Cards

Cards provide an attractive way to highlight content, create navigation, and organize information into visual blocks.

Basic Cards

Getting Started

Learn the basics and create your first project.

Components

Explore the built-in component library.

Configuration

Customize your documentation site.

markdown

<Cards>
  <Card title="Getting Started" icon="rocket" href="/quickstart">
    Learn the basics and create your first project.
  </Card>
  <Card title="Components" icon="code" href="/components/callouts">
    Explore the built-in component library.
  </Card>
  <Card title="Configuration" icon="settings" href="/config/overview">
    Customize your documentation site.
  </Card>
</Cards>

Single Card

Use a standalone card for featured content:

New in v2.0

Check out the latest features including OpenAPI import and LLM-friendly output.

markdown

<Card title="New in v2.0" icon="sparkles" href="/changelog">
  Check out the latest features including OpenAPI import and LLM-friendly output.
</Card>

Cards with Emoji Icons

📖Documentation

Comprehensive guides and references.

💡Examples

Real-world usage examples.

👥Community

Join our community discussions.

markdown

<Cards>
  <Card title="Documentation" icon="📖" href="/docs">
    Comprehensive guides and references.
  </Card>
  <Card title="Examples" icon="💡" href="/examples">
    Real-world usage examples.
  </Card>
</Cards>

External Links

Cards can link to external URLs:

GitHub

View source code and contribute.

Discord

Chat with the community.

Cards Without Links

Cards without href are purely informational:

Fast Builds

Native Dart binary compiles documentation in milliseconds.

Zero Config

Sensible defaults mean you can start writing immediately.

Beautiful Design

Modern, clean design with automatic dark mode.

Available Icons

Built-in icon names you can use:

arrow-right
- arrow-left
- check
- x
- info
- warning
- star
- heart
- home
- settings

search
- menu
- close
- copy
- external-link
- github
- twitter
- discord
- rocket
- book

code
- terminal
- file
- folder
- download
- upload
- link
- mail
- user
- zap

Feature Highlights Example

Markdown-Based

Write documentation in familiar Markdown with powerful extensions.

30+ Components

Callouts, tabs, accordions, steps, and more built-in.

Full-Text Search

Pagefind-powered search works entirely client-side.

SEO Optimized

Automatic sitemap, meta tags, and Open Graph support.

Use Cases

Use Case	Example
Navigation	Link to major sections of your docs
Feature highlights	Showcase product capabilities
Related content	Suggest next steps or related pages
Quick links	Provide shortcuts to common destinations