Aller au contenu
Starlight

Grilles de cartes

Pour regrouper plusieurs composants <Card> ou <LinkCard> dans une grille, utilisez le composant <CardGrid>.

Aperçu

Étoiles

Sirius, Véga, Bételgeuse

Lunes

Io, Europe, Ganymède

Import

import { CardGrid } from '@astrojs/starlight/components';

Utilisation

Grouper des cartes

Affichez plusieurs composants <Card> côte à côte lorsqu’il y a suffisamment d’espace en les regroupant à l’aide du composant <CardGrid>.

import { Card, CardGrid } from '@astrojs/starlight/components';


<CardGrid>
  <Card title="Regardez-ça" icon="open-book">
    Contenu intéressant que vous souhaitez mettre en évidence.
  </Card>
  <Card title="Et autre chose" icon="information">
    Plus d'informations que vous souhaitez partager.
  </Card>
</CardGrid>
Aperçu

Regardez-ça

Contenu intéressant que vous souhaitez mettre en évidence.

Et autre chose

Plus d’informations que vous souhaitez partager.

Grouper des cartes de liaison

Affichez plusieurs composants <LinkCard> côte à côte lorsqu’il y a suffisamment d’espace en les regroupant à l’aide du composant <CardGrid>.

import { LinkCard, CardGrid } from '@astrojs/starlight/components';


<CardGrid>
  <LinkCard
    title="Création de contenu en Markdown"
    href="/fr/guides/authoring-content/"
  />
  <LinkCard title="Composants" href="/fr/components/using-components/" />
</CardGrid>
Aperçu
Création de contenu en Markdown
Composants

Décaler des cartes

Décalez la deuxième colonne de la grille verticalement pour ajouter un intérêt visuel en ajoutant l’attribut stagger au composant <CardGrid>.

Cet attribut est utile sur votre page d’accueil pour afficher les principales fonctionnalités de votre projet.

import { Card, CardGrid } from '@astrojs/starlight/components';


<CardGrid stagger>
  <Card title="Regardez-ça" icon="open-book">
    Contenu intéressant que vous souhaitez mettre en évidence.
  </Card>
  <Card title="Et autre chose" icon="information">
    Plus d'informations que vous souhaitez partager.
  </Card>
</CardGrid>
Aperçu

Regardez-ça

Contenu intéressant que vous souhaitez mettre en évidence.

Et autre chose

Plus d’informations que vous souhaitez partager.

Props de <CardGrid>

Implémentation : CardGrid.astro

Le composant <CardGrid> accepte les props suivantes :

stagger

Type : boolean

Définit si les cartes de la grille doivent être décalées ou non.