cards.mdx

title	description	sidebar
Cartes	Apprenez à utiliser des cartes dans Starlight pour afficher du contenu dans un cadre.	order 2

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

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

import Preview from '~/components/component-preview.astro';

Io, Europe, Ganymède

Import

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.

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

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

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

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.

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

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

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

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.