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

Importation

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>.

MDX

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>

Markdoc

{% 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>.

MDX

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>

Markdoc

{% 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.

MDX

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>

Markdoc

{% cardgrid stagger=true %}
{% 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.