Card Group

Card groups display related content in a responsive grid layout. Each card can have a label, icon, and link.

Basic usage

Getting Started

Set up Explainer v2 and start building documentation.

Project Structure

Understand the monorepo layout and configuration.

::::card-group{cols=2}
  :::card{label="Getting Started" icon="lucide:rocket"}
    Set up Explainer v2 and start building documentation.
  :::
  
  :::card{label="Project Structure" icon="lucide:folder-tree"}
    Understand the monorepo layout and configuration.
  :::
::::

Three columns

Docs

Main documentation site.

Blog

Blog with posts and tags.

Website

Marketing landing page.

::::card-group{cols=3}
  :::card{label="Docs" icon="lucide:book-open"}
    Main documentation site.
  :::
  
  :::card{label="Blog" icon="lucide:newspaper"}
    Blog with posts and tags.
  :::
  
  :::card{label="Website" icon="lucide:globe"}
    Marketing landing page.
  :::
::::

Syntax

Card groups use nested directive syntax. Note the increasing colons for nesting:

::::card-group{cols=2}
  :::card{label="Title" icon="lucide:icon-name"}
    Card content with **Markdown** support.
  :::
::::

Props

CardGroup

Prop	Type	Default	Description
`cols`	`1` \| `2` \| `3` \| `4`	`2`	Number of columns in the grid layout

Card

Prop	Type	Default	Description
`label`	`string`	—	Card title (required)
`icon`	`string`	—	Iconify icon identifier (e.g., `lucide:rocket`)