Mise en avant (Callout)

Utilisez une mise en avant pour attirer l’attention sur une information utile mais non bloquante.

attention

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

Information	Valeur
Niveau	Pro
Composants Twig	dsfr:callout

Usage

• Le titre doit être court.
• Ajoutez un lien d’action seulement s’il est directement utile.

Modes d'utilisation

Exemple principal

Mise en avant · exemple principal

<twig:dsfr:callout title="Besoin d’aide ?">
  <p>Un conseiller peut vous accompagner dans votre démarche.</p>
  <p><a class="fr-btn" href="/support">Contacter le support</a></p>
</twig:dsfr:callout>

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:callout
  id="mise-en-avant-example"
  class="fr-mt-2w"
  data-controller="mise-en-avant"
/>

API publique

Composant	Rôle
dsfr:callout	Composant principal de cette page.

Configuration

Option	Type	Défaut / requis	Valeurs et usage
title	string|null	null	Titre de la mise en avant.
icon	string|null	null	Classe d’icône DSFR, par exemple fr-icon-save-line.
titleTag	enum	h3	h1, h2, h3, h4, h5, h6, p
accent	string|null	null	Couleur d’accent DSFR.
contenu	slot	Optionnel	Texte et actions de la mise en avant.

Guide d'intégration

Question	Réponse
Famille DSFR	Feedback
Quand l'utiliser	Quand l’interface doit qualifier un état, attirer l’attention ou confirmer une action.
Quand éviter	Pour structurer une page complète : gardez ces composants ponctuels et proches du contenu concerné.
API publique	Utilisez uniquement les composants Twig listés sur cette page : dsfr:callout.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Mise en avant : options, accessibilité et rendu DSFR

Variantes de mise en avant

• icône DSFR avec icon et placement contrôlé par la prop dédiée.

Points de contrôle propres à ce composant

• Le titre doit être court.
• Ajoutez un lien d’action seulement s’il est directement utile.
• Contrôlez l’icône, son placement et le libellé accessible quand l’icône porte seule l’action.

Accessibilité feedback

• Le message doit être autonome et compréhensible sans couleur seule.
• Utilisez alertRole seulement pour les messages ajoutés dynamiquement qui doivent être annoncés immédiatement.
• Gardez les libellés courts et actionnables.

Intégration Symfony/Twig pour dsfr:callout

• Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:callout quand ils concernent son nœud racine.

Checklist de recette

• message compréhensible sans icône
• contraste en thème clair et sombre
• comportement de fermeture si dismissible
• 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.