Aller au contenu
Starlight

Cartes de liaison

Pour afficher des liens vers différentes pages de manière proéminente, utilisez le composant <LinkCard>.

Aperçu
Personnaliser Starlight Apprenez à vous approprier votre site Starlight avec des styles personnalisés, des polices de caractères, et plus encore.

Import

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

Utilisation

Affichez un lien en évidence en utilisant le composant <LinkCard>. Chaque <LinkCard> nécessite un attribut title ainsi qu’un attribut href.

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


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

Ajouter une description à un lien

Ajoutez une courte description à une carte de liaison en utilisant l’attribut description.

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


<LinkCard
  title="Internationalisation"
  href="/fr/guides/i18n/"
  description="Configurer Starlight pour prendre en charge plusieurs langues."
/>
Aperçu
Internationalisation Configurer Starlight pour prendre en charge plusieurs langues.

Grouper des cartes de liaison

Affichez plusieurs cartes de liaison 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 de liaison » pour un exemple.

Props de <LinkCard>

Implémentation : LinkCard.astro

Le composant <LinkCard> accepte les props suivantes, ainsi que tous les autres attributs de l’élément <a> :

title

Obligatoire
Type : string

Le titre de la carte de liaison à afficher.

href

Obligatoire
Type : string

L’URL vers laquelle pointer lorsque d’une interaction avec la carte.

description

Type : string

Une description facultative à afficher sous le titre.