Mise en exergue - Highlight

La mise en exergue permet à l’utilisateur de distinguer et repérer une information facilement. Elle 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 le composant “Mise en avant”.

La taille du texte peut être adaptée avec le paramètre size: :sm[/md/lg].

Vue d’ensemble

Le rendu de base de la mise en exergue

Code

= dsfr_highlight(text: "Ceci est une information mise en avant")

Résultat

Ceci est une information mise en avant

<div class="fr-highlight">
  <p class="fr-text--md">
    Ceci est une information mise en avant
  </p>
</div>

Avec du texte élargi

Rendu avec une taille de texte élargie

Code

= dsfr_highlight(text: "Ceci est une information mise en avant, avec un texte plus large", size: :lg)

Résultat

Ceci est une information mise en avant, avec un texte plus large

<div class="fr-highlight">
  <p class="fr-text--lg">
    Ceci est une information mise en avant, avec un texte plus large
  </p>
</div>