Mise en exergue

La mise en exergue est un élément éditorial permettant de mettre en forme du contenu dans une page.

HTML

Structure du composant

Le composant Mise en exergue permet de mettre en évidence des informations importantes. Sa structure est conçue pour s’adapter aux écrans mobiles et comprend les éléments suivants :

  1. Un conteneur principal sous la balise <div> :
    • Doit avoir la classe fr-highlight.
  2. Une zone de contenu pour le texte de la mise en exergue :
    • Représentée par un élément <p>.

Exemple de structure HTML

<div class="fr-highlight">
    <p>Lorem [...] elit ut.</p>
</div>

CSS

Installation du CSS

Pour fonctionner correctement, le style CSS de la mise en exergue et du core doit être importé dans la page. Les fichiers doivent être inclus dans le <head> avant le contenu de la page. 

<link href="dist/core/core.min.css" rel="stylesheet">
<link href="dist/component/highlight/highlight.min.css" rel="stylesheet">

NB: Il est aussi possible d'importer le CSS global du DSFR dsfr.min.css.

Pour une compatibilité avec Internet Explorer 11, les fichiers legacy peuvent également être ajoutés : 

<link href="dist/core/core.legacy.min.css" rel="stylesheet">
<link href="dist/component/highlight/highlight.legacy.min.css" rel="stylesheet">

Variantes de taille

Le texte de la mise en exergue peut être de différentes tailles :

  • Par défaut en taille md.
  • fr-text--sm : Petit texte.
  • fr-text--lg : Grand texte.

Exemple de texte de différentes tailles

<div class="fr-highlight">
  <p class="fr-text--lg">Lorem [...] elit ut.</p>
</div>

Variantes d'accentuation

Le composant Mise en exergue est accentuable, permettant le changement de la couleur de la bordure latérale. Pour cela, ajouter la classe fr-highlight--NOM-COULEUR au même niveau que la classe fr-highlight.

Exemple de structure accentuée

<div class="fr-highlight fr-highlight--green-emeraude">
    <p>Lorem [...] elit ut.</p>
</div>

JavaScript

Le composant Mise en exergue ne nécessite pas l'utilisation de JavaScript pour son fonctionnement de base.

Note de version

Voir les évolutions sur github

v1.11.0 - 11 décembre 2023

met à jour les espacements

  • passe le padding à 5v en mobile et 9v en desktop

🐛 fix

highlight

#777

background image à la place de box shadow

  • refactorisation de la bordure en background-image à la place de box-shadow

♻️ refactor

highlight

callout

#746

Proposer une amélioration

Aidez-nous à améliorer la documentation en laissant vos retours, questions ou commentaires sur GitHub.

Accéder à Github