Mise en avant

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

HTML

Structure du composant

Le composant Mise en avant 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-callout.
    • Peut avoir une classe fr-icon-NOM-ICONE pour ajouter une icône avant le titre.
  2. Un titre pour la mise en avant :
    • Représenté par un élément <hx>, suivant le niveau d'entête voulu, avec la classe fr-callout__title.
  3. Une zone de contenu pour le texte de la mise en avant :
    • Représentée par un élément <p> avec la classe fr-callout__text.
  4. D'autres éléments facultatifs comme un lien ou un bouton.

Exemple de structure HTML

<div class="fr-callout">
  <h3 class="fr-callout__title">Titre de la mise en avant</h3>
  <p class="fr-callout__text">Contenu de la mise en avant.</p>
  <button type="button" class="fr-btn">Libellé bouton</button>
</div>

CSS

Installation du CSS

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 Remarque
Core Oui
Callout Oui
Button Non Uniquement si ajout d'un bouton à l'intérieur
Utility Non Uniquement pour l'ajout d'icône

Exemple d'imports CSS

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

Variantes de style

  • Ajout d'icône : Le composant Mise en avant peut intégrer une icône, il suffit pour cela d'ajouter la classe fr-icon-NOM-ICON au même niveau que la classe fr-callout.
  • Accentuation : Le composant est accentuable, permettant le changement de la couleur de fond et de la bordure latérale. Pour cela, ajouter la classe fr-callout-NOM-COULEUR au même niveau que la classe fr-callout.

Exemple de variante de style

<div class="fr-callout fr-callout--green-emeraude">

JavaScript

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

Note de version

Voir les évolutions sur github

v1.14.0 - 25 juin 2025

ajoute espacement sur la classe de titre

feat

callout

#1173

v1.11.0 - 11 décembre 2023

background image à la place de box shadow

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

refactor

highlight

callout

#746

v1.2.0 - 17 novembre 2021

accentuation du background

fix

callout

#125

Proposer une amélioration

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

Accéder à Github

Contenu associé

Citation

Présentation du composant Citation permettant d’intégrer un extrait de discours ou de texte au sein d’un contenu éditorial, en respectant des règles précises de forme.

Mise en exergue

Présentation du composant éditorial Mise en exergue destiné à distinguer une information importante au sein du contenu principal d’une page.