---
boost: 0
sitemap:
  noindex: true
title: Démonstration de la Carte
shortTitle: Démonstration de la Carte
description: Illustration du fonctionnement à travers différents cas d’usage et exemples interactifs du composant Carte.
shortDescription: Carte cliquable redirigeant vers une page éditoriale avec aperçu.
keywords: carte, card, composant, aperçu, lien, redirection, contenu, média, badge, tag, bouton, DSFR, tuile
cover: ../_asset/cover/cover.png
excerpt: Le composant carte permet d’accéder à un contenu éditorial à partir d’un aperçu visuel structuré, sous forme verticale ou horizontale.
summary: Le composant carte est un point d’entrée vers une page éditoriale ou un contenu spécifique. Il permet d’afficher un aperçu clair à travers une structure visuelle contenant un titre, une description, des éléments comme badges ou tags, une image ou vidéo, et des actions. Il existe en formats vertical et horizontal, en plusieurs tailles, et peut inclure des variations esthétiques comme le fond gris ou l’absence de bordure. Des règles UX précises guident son usage pour garantir la cohérence, l’accessibilité et la bonne hiérarchisation de l’information.
mesh:
  - component/badge
  - component/tag
  - component/tile
---

## Carte

La carte est un élément d’interaction avec l’interface permettant de rediriger l’usager vers une page éditoriale donc elle donne un aperçu.

:::dsfr-doc-tab-navigation

- [Présentation](../index.md)
- Démo
- [Design](../design/index.md)
- [Code](../code/index.md)
- [Accessibilité](../accessibility/index.md)

:::

::dsfr-doc-storybook{storyId=card--docs}
