Cartes

Pour afficher du contenu dans un cadre correspondant aux styles de Starlight, utilisez le composant <Card>.

Aperçu

Lunes

Io, Europe, Ganymède

Importation

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

Utilisation

Affichez une carte en utilisant le composant <Card> et fournissez un titre à la carte en utilisant la propriété title.

MDX

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

<Card title="Regardez-ça">
  Contenu intéressant que vous souhaitez mettre en évidence.
</Card>

Markdoc

{% card title="Regardez-ça" %}
Contenu intéressant que vous souhaitez mettre en évidence.
{% /card %}

Aperçu

Regardez-ça

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

Ajouter des icônes aux cartes

Incluez une icône dans une carte en utilisant l’attribut icon défini avec le nom de l’une des icônes intégrées à Starlight.

MDX

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

<Card title="Étoiles" icon="star">
  Sirius, Véga, Bételgeuse
</Card>

Markdoc

{% card title="Étoiles" icon="star" %}
Sirius, Véga, Bételgeuse
{% /card %}

Aperçu

Étoiles

Sirius, Véga, Bételgeuse

Grouper des cartes

Affichez plusieurs cartes côte à côte lorsqu’il y a suffisamment d’espace en les regroupant à l’aide du composant <CardGrid>. Consultez le guide « Grouper des cartes » pour un exemple.

Props de <Card>

Implémentation : Card.astro

Le composant <Card> accepte les props suivantes :

title

Obligatoire
Type : string

Le titre de la carte à afficher.

icon

Type : string

Une carte peut inclure un attribut icon défini avec le nom de l’une des icônes intégrées à Starlight.