Mise en exergue (Highlight)

Utilisez une mise en exergue pour faire ressortir une information courte dans un contenu éditorial.

info

Ce composant est inclus dans l’offre Community.

Information	Valeur
Niveau	Community
Composants Twig	dsfr:highlight

Usage

• Le composant est purement présentational.
• Choisissez un accent DSFR cohérent avec la page.

Modes d'utilisation

Exemple principal

Mise en exergue · exemple principal

<twig:dsfr:highlight
  text="Le délai moyen de traitement est de 72 heures."
  accent="blue-cumulus"
/>

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

API publique

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

Configuration

Option	Type	Défaut / requis	Valeurs et usage
text	string	Requis	Texte mis en exergue.
size	enum|null	null	sm, md, lg ou null.
accent	string|null	null	Couleur d’accent DSFR.

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:highlight.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Mise en exergue : options, accessibilité et rendu DSFR

Variantes de mise en exergue

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

Points de contrôle propres à ce composant

• Le composant est purement présentational.
• Choisissez un accent DSFR cohérent avec la page.

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:highlight

• Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:highlight 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.