i18n(fr): add `components/cards`, `components/link-cards` & `components/card-grids` (#2346)

Co-authored-by: Thomas Bonnet <thomasbnt@protonmail.com>

3 files changed, 421 insertions, 0 deletions

diff --git a/docs/src/content/docs/fr/components/card-grids.mdx b/docs/src/content/docs/fr/components/card-grids.mdx
new file mode 100644
index 00000000..4b6f15eb
--- /dev/null
+++ b/docs/src/content/docs/fr/components/card-grids.mdx
@@ -0,0 +1,181 @@
+---
+title: Grilles de cartes
+description: Apprenez à regrouper plusieurs cartes dans une grille dans Starlight.
+sidebar:
+  order: 4
+---
+
+import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';
+
+Pour regrouper plusieurs composants [`<Card>`](/fr/components/cards/) ou [`<LinkCard>`](/fr/components/link-cards/) dans une grille, utilisez le composant `<CardGrid>`.
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+
+<CardGrid slot="preview">
+	<Card title="Étoiles" icon="star">
+		Sirius, Véga, Bételgeuse
+	</Card>
+	<Card title="Lunes" icon="moon">
+		Io, Europe, Ganymède
+	</Card>
+</CardGrid>
+
+</Preview>
+
+## Import
+
+```tsx
+import { CardGrid } from '@astrojs/starlight/components';
+```
+
+## Utilisation
+
+### Grouper des cartes
+
+Affichez plusieurs composants [`<Card>`](/fr/components/cards/) côte à côte lorsqu'il y a suffisamment d'espace en les regroupant à l'aide du composant `<CardGrid>`.
+
+<Preview>
+
+```mdx {3,10}
+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>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc {1,9}
+{% 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 %}
+```
+
+</Fragment>
+
+<CardGrid slot="preview">
+	<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>
+
+</Preview>
+
+### Grouper des cartes de liaison
+
+Affichez plusieurs composants [`<LinkCard>`](/fr/components/link-cards/) côte à côte lorsqu'il y a suffisamment d'espace en les regroupant à l'aide du composant `<CardGrid>`.
+
+<Preview>
+
+```mdx {3,9}
+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>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc {1,7}
+{% cardgrid %}
+{% linkcard
+   title="Création de contenu en Markdown"
+	 href="/fr/guides/authoring-content/" /%}
+
+{% linkcard title="Composants" href="/fr/components/using-components/" /%}
+{% /cardgrid %}
+```
+
+</Fragment>
+
+<CardGrid slot="preview">
+	<LinkCard
+		title="Création de contenu en Markdown"
+		href="/fr/guides/authoring-content/"
+	/>
+	<LinkCard title="Composants" href="/fr/components/using-components/" />
+</CardGrid>
+
+</Preview>
+
+### 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`](#stagger) au composant `<CardGrid>`.
+
+Cet attribut est utile sur votre page d'accueil pour afficher les principales fonctionnalités de votre projet.
+
+<Preview>
+
+```mdx "stagger"
+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>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc "stagger=true"
+{% 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 %}
+```
+
+</Fragment>
+
+<CardGrid slot="preview" 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>
+
+</Preview>
+
+## Props de `<CardGrid>`
+
+**Implémentation :** [`CardGrid.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/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.
diff --git a/docs/src/content/docs/fr/components/cards.mdx b/docs/src/content/docs/fr/components/cards.mdx
new file mode 100644
index 00000000..23babbee
--- /dev/null
+++ b/docs/src/content/docs/fr/components/cards.mdx
@@ -0,0 +1,110 @@
+---
+title: Cartes
+description: Apprenez à utiliser des cartes dans Starlight pour afficher du contenu dans un cadre.
+sidebar:
+  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';
+
+<Preview>
+
+<Card slot="preview" title="Lunes" icon="moon">
+	Io, Europe, Ganymède
+</Card>
+
+</Preview>
+
+## Import
+
+```tsx
+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`](#title).
+
+<Preview>
+
+```mdx
+import { Card } from '@astrojs/starlight/components';
+
+<Card title="Regardez-ça">
+	Contenu intéressant que vous souhaitez mettre en évidence.
+</Card>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc
+{% card title="Regardez-ça" %}
+Contenu intéressant que vous souhaitez mettre en évidence.
+{% /card %}
+```
+
+</Fragment>
+
+<Card slot="preview" title="Regardez-ça">
+	Contenu intéressant que vous souhaitez mettre en évidence.
+</Card>
+
+</Preview>
+
+### Ajouter des icônes aux cartes
+
+Incluez une icône dans une carte en utilisant l'attribut [`icon`](#icon) défini avec le nom de [l'une des icônes intégrées à Starlight](/fr/reference/icons/#toutes-les-icônes).
+
+<Preview>
+
+```mdx 'icon="star"'
+import { Card } from '@astrojs/starlight/components';
+
+<Card title="Étoiles" icon="star">
+	Sirius, Véga, Bételgeuse
+</Card>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc 'icon="star"'
+{% card title="Étoiles" icon="star" %}
+Sirius, Véga, Bételgeuse
+{% /card %}
+```
+
+</Fragment>
+
+<Card slot="preview" title="Étoiles" icon="star">
+	Sirius, Véga, Bételgeuse
+</Card>
+
+</Preview>
+
+### 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>`](/fr/components/card-grids/).
+Consultez le guide [« Grouper des cartes »](/fr/components/card-grids/#grouper-des-cartes) pour un exemple.
+
+## Props de `<Card>`
+
+**Implémentation :** [`Card.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/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](/fr/reference/icons/#toutes-les-icônes).
diff --git a/docs/src/content/docs/fr/components/link-cards.mdx b/docs/src/content/docs/fr/components/link-cards.mdx
new file mode 100644
index 00000000..64a03d7e
--- /dev/null
+++ b/docs/src/content/docs/fr/components/link-cards.mdx
@@ -0,0 +1,130 @@
+---
+title: Cartes de liaison
+description: Apprenez à afficher des liens de manière proéminente sous forme de cartes dans Starlight.
+sidebar:
+  order: 3
+---
+
+import { LinkCard } from '@astrojs/starlight/components';
+
+Pour afficher des liens vers différentes pages de manière proéminente, utilisez le composant `<LinkCard>`.
+
+import Preview from '~/components/component-preview.astro';
+
+<Preview>
+
+<LinkCard
+	slot="preview"
+	title="Personnaliser Starlight"
+	description="Apprenez à vous approprier votre site Starlight avec des styles personnalisés, des polices de caractères, et plus encore."
+	href="/fr/guides/customization/"
+/>
+
+</Preview>
+
+## Import
+
+```tsx
+import { LinkCard } from '@astrojs/starlight/components';
+```
+
+## Utilisation
+
+Affichez un lien en évidence en utilisant le composant `<LinkCard>`.
+Chaque `<LinkCard>` nécessite un attribut [`title`](#title) ainsi qu'un attribut [`href`](#href).
+
+<Preview>
+
+```mdx
+import { LinkCard } from '@astrojs/starlight/components';
+
+<LinkCard
+	title="Création de contenu en Markdown"
+	href="/fr/guides/authoring-content/"
+/>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc
+{% linkcard
+   title="Création de contenu en Markdown"
+	 href="/fr/guides/authoring-content/" /%}
+```
+
+</Fragment>
+
+<LinkCard
+	slot="preview"
+	title="Création de contenu en Markdown"
+	href="/fr/guides/authoring-content/"
+/>
+
+</Preview>
+
+### Ajouter une description à un lien
+
+Ajoutez une courte description à une carte de liaison en utilisant l'attribut [`description`](#description).
+
+<Preview>
+
+```mdx {6}
+import { LinkCard } from '@astrojs/starlight/components';
+
+<LinkCard
+	title="Internationalisation"
+	href="/fr/guides/i18n/"
+	description="Configurer Starlight pour prendre en charge plusieurs langues."
+/>
+```
+
+<Fragment slot="markdoc">
+
+```markdoc {4}
+{% linkcard
+   title="Internationalisation"
+	 href="/fr/guides/i18n/"
+	 description="Configurer Starlight pour prendre en charge plusieurs langues." /%}
+```
+
+</Fragment>
+
+<LinkCard
+	slot="preview"
+	title="Internationalisation"
+	href="/fr/guides/i18n/"
+	description="Configurer Starlight pour prendre en charge plusieurs langues."
+/>
+
+</Preview>
+
+### 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>`](/fr/components/card-grids/).
+Consultez le guide [« Grouper des cartes de liaison »](/fr/components/card-grids/#grouper-des-cartes-de-liaison) pour un exemple.
+
+## Props de `<LinkCard>`
+
+**Implémentation :** [`LinkCard.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/LinkCard.astro)
+
+Le composant `<LinkCard>` accepte les props suivantes, ainsi que tous les autres [attributs de l'élément `<a>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/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.