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 :

Un conteneur principal sous la balise <div> :
- Doit avoir la classe fr-highlight.
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>

Pour fonctionner correctement le style CSS du composant et de ses dépendances doivent être importés. L'import doit se faire avant le contenu de la page dans la partie <head>, et de préférence avec les fichiers minifiés, car plus légers.

Il est possible d'importer les fichiers CSS avec un niveau de granularité adapté à vos besoins. Voir le découpage des fichiers CSS du DSFR dans la documentation dédiée .

Dépendances CSS
Dépendance	Obligatoire
Core	Oui
Highlight	Oui

Exemple d'imports CSS

<link href="dist/core/core.min.css" rel="stylesheet">
<link href="dist/component/highlight/highlight.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