Carte (Card)

Utilisez une carte pour présenter une ressource, une démarche ou un contenu cliquable.

attention

Ce composant nécessite une licence Pro valide en production.

Information	Valeur
Niveau	Pro
Composants Twig	dsfr:card, dsfr:card:header, dsfr:card:body, dsfr:card:content, dsfr:card:title, dsfr:card:description, dsfr:card:footer

Usage

• Composez la carte avec ses sous-composants plutôt qu’avec des blocs Twig nommés.
• Le lien peut être agrandi avec la classe DSFR prévue.

Modes d'utilisation

Exemple principal

Carte · exemple principal

<twig:dsfr:card horizontal>
  <twig:dsfr:card:header src="/images/service.jpg" alt="" />
  <twig:dsfr:card:body>
    <twig:dsfr:card:content>
      <twig:dsfr:card:title href="/services/permis">Demande de permis</twig:dsfr:card:title>
      <twig:dsfr:card:description>Suivre l’instruction d’un dossier.</twig:dsfr:card:description>
    </twig:dsfr:card:content>
    <twig:dsfr:card:footer>
      <twig:dsfr:link label="Voir le dossier" href="/services/permis" />
    </twig:dsfr:card:footer>
  </twig:dsfr:card:body>
</twig:dsfr:card>

Composition

Cette page expose aussi les sous-composants publics suivants : dsfr:card:header, dsfr:card:body, dsfr:card:content, dsfr:card:title, dsfr:card:description, dsfr:card:footer. Utilisez-les quand vous devez contrôler précisément la structure Twig au lieu de passer un tableau de données.

astuce

Préférez les sous-composants publics aux include, macros ou copies de templates internes. Cela garde votre code aligné avec les évolutions du bundle.

Attributs HTML

Ajoutez vos attributs applicatifs directement sur le composant quand ils concernent le nœud racine rendu par le template.

Attributs pass-through

<twig:dsfr:card
  id="carte-example"
  class="fr-mt-2w"
  data-controller="carte"
/>

API publique

Composant	Rôle
dsfr:card	Composant principal de cette page.
dsfr:card:header	Sous-composant public utilisable en composition Twig.
dsfr:card:body	Sous-composant public utilisable en composition Twig.
dsfr:card:content	Sous-composant public utilisable en composition Twig.
dsfr:card:title	Sous-composant public utilisable en composition Twig.
dsfr:card:description	Sous-composant public utilisable en composition Twig.
dsfr:card:footer	Sous-composant public utilisable en composition Twig.

Configuration

Option	Type	Défaut / requis	Valeurs et usage
title	string	""	Titre de la carte. Vide = mode composition avec sous-composants.
href	string|null	Selon composant	URL de destination. Les URL sont normalisées.
description	string|null	null	Description courte.
size	enum|null	null	sm, lg
titleTag	enum	h3	h1, h2, h3, h4, h5, h6, p
horizontal	bool	false	Disposition horizontale.
enlarge	bool	true	Lien agrandi sur toute la carte.
noIcon	bool	false	Masque l’icône de lien.
download / external	bool	false	Variantes téléchargement ou lien externe.
details	array|string	[]	Métadonnées { label, icon? }.

Guide d'intégration

Question	Réponse
Famille DSFR	Contenu
Quand l'utiliser	Quand vous présentez, organisez ou approfondissez un contenu éditorial ou métier.
Quand éviter	Pour les contrôles de formulaire ou la navigation principale, sauf si le composant expose explicitement cette interaction.
API publique	Utilisez uniquement les composants Twig listés sur cette page : dsfr:card, dsfr:card:header, dsfr:card:body, dsfr:card:content, dsfr:card:title, dsfr:card:description, dsfr:card:footer.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Carte : composition avec 6 sous-composants

Variantes de carte

• tailles disponibles via size quand le DSFR expose une variante compacte ou large.

Points de contrôle propres à ce composant

• Composez la carte avec ses sous-composants plutôt qu’avec des blocs Twig nommés.
• Le lien peut être agrandi avec la classe DSFR prévue.
• Testez la composition avec dsfr:card:header, dsfr:card:body, dsfr:card:content, dsfr:card:title, dsfr:card:description, dsfr:card:footer sans copier les templates internes.
• Contrôlez le rendu lien/action selon la présence de href et le libellé annoncé au clavier.

Accessibilité contenu

• Respectez la hiérarchie de titres de la page.
• Les images informatives ont un alt utile ; les images décoratives ont un alt vide.
• Les contenus masqués ou ouverts doivent rester pilotables au clavier.

Intégration Symfony/Twig pour dsfr:card

• Composez avec les sous-composants publics dsfr:card:header, dsfr:card:body, dsfr:card:content, dsfr:card:title, dsfr:card:description, dsfr:card:footer quand le rendu doit être plus précis que les props.
• Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:card quand ils concernent son nœud racine.

Checklist de recette

• ordre de lecture cohérent
• titres dans le bon niveau
• contenu disponible sans souris
• rendu vérifié en thème clair et sombre ;
• rendu vérifié sur mobile, tablette et desktop ;
• aucune erreur dans le profiler DSFR ni dans l'inspecteur d'accessibilité du navigateur.

Erreurs fréquentes

Symptôme	Correction
Les classes DSFR semblent incomplètes	Utilisez les props du composant plutôt que des classes ajoutées à la main.
Le composant rend en local mais pas en production	Vérifiez la licence avec php bin/console dsfr:license:validate.