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 de la mise en avant 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/callout/callout.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/callout/callout.legacy.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