Card Group

Les groupes de cartes affichent du contenu associé dans une grille responsive. Chaque carte peut avoir un libellé, une icône et un lien.

Utilisation basique

Premiers pas

Configurez Explainer v2 et commencez à créer votre documentation.

Structure du projet

Comprenez l’organisation du monorepo et sa configuration.

::::card-group{cols=2}
  :::card{label="Premiers pas" icon="lucide:rocket"}
    Configurez Explainer v2 et commencez à créer votre documentation.
  :::

  :::card{label="Structure du projet" icon="lucide:folder-tree"}
    Comprenez l'organisation du monorepo et sa configuration.
  :::
::::

Trois colonnes

Docs

Site de documentation principal.

Blog

Blog avec articles et tags.

Site web

Page d’accueil marketing.

::::card-group{cols=3}
  :::card{label="Docs" icon="lucide:book-open"}
    Site de documentation principal.
  :::

  :::card{label="Blog" icon="lucide:newspaper"}
    Blog avec articles et tags.
  :::

  :::card{label="Site web" icon="lucide:globe"}
    Page d'accueil marketing.
  :::
::::

Syntaxe

Les groupes de cartes utilisent une syntaxe de directives imbriquées. Notez l’augmentation du nombre de deux-points pour l’imbrication :

::::card-group{cols=2}
  :::card{label="Titre" icon="lucide:icon-name"}
    Contenu de la carte avec support du **Markdown**.
  :::
::::

Props

CardGroup

Prop	Type	Défaut	Description
`cols`	`1` \| `2` \| `3` \| `4`	`2`	Nombre de colonnes dans la grille

Card

Prop	Type	Défaut	Description
`label`	`string`	—	Titre de la carte (obligatoire)
`icon`	`string`	—	Identifiant d’icône Iconify (ex. `lucide:rocket`)