Mise en exergue - Highlight

La mise en exergue permet à l’utilisateur de distinguer et repérer une information facilement.

 

Mise en exergue

La mise en exergue met en évidence une information déjà présente dans le reste du contenu : soit une reformulation, soit une reprise du texte. Pour mettre en évidence une information complémentaire, utilisez la mise en avant .

Structure

Elle se compose le l'élément suivant :

  • un texte - obligatoire.

 

 

1 2 3 4 5 6 <div class="fr-highlight"> <p>Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions. </p> </div>


Lorsqu’elle est intégrée dans un contenu la mise en exergue n’est pas alignée sur la gauche avec le corps de texte. Cela permet de la mettre en avant comme illustré dans la mise en situation ci-dessous.

Variantes tailles et couleurs

Par défaut le composant est proposé en taille MD.
Il peut également être utilisé en taille SM ou LG en utilisant les classes utilitaires dédiées (fr-text--BP).

1 2 3 4 5 6 <div class="fr-highlight"> <p class="fr-text--sm">Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.</p> </div> <div class="fr-highlight"> <p class="fr-text--lg">Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.</p> </div>

Règles d’utilisation

Usages

Les messages d’erreur, d’alerte ou de confirmation, ne sont pas des mises en avant. Pour utiliser ces blocs, rendez-vous dans la section Notifications (à venir) du DSFR.

Pour concevoir vos contenus éditoriaux vous pouvez vous appuyer sur les typographies , Mise en exergue , Médias (intégrés au contenu) , tableau .

Accessibilité

Pas de règle particulière tant que la sémantique html est respectée (hx et p)

Contenus

Les informations présentées doivent être synthétiques pour être facilement lues par l’utilisateur.

Personnalisation

Le style de ce composant n’est pas personnalisable.
Toutefois, certains éléments sont optionnels - voir la structure du composant.

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :