Mise en avant - Call out
La mise en avant permet à l’utilisateur de distinguer rapidement une information qui vient compléter le contenu consulté.
Mise en avant
La mise en avant est une proposition de mise en page du contenu éditorial pour mettre en évidence une information complémentaire.
Structure
Elle se compose des éléments suivants :
Une icône - optionnelle
pour aider à la compréhension du message. L’icône est facilement modifiable : la classe correspondante à l’icône voulue doit être placée dans l’attribut class de l'élément
.fr-callout.
Voir les icônes disponibles.
Un titre - optionnel
Une description - obligatoire
Un bouton - optionnel
qui permet d’inciter à l’action, ou un lien pour naviguer vers un autre contenu.
Une bordure de couleur (voir la personnalisation possible)- obligatoire.
1
2
3
4
5
6
7
8
9
<div class="fr-callout fr-fi-information-line">
<p class="fr-callout__title">Titre mise en avant</p>
<p class="fr-callout__text">
Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.
</p>
<button class="fr-btn">
Label bouton MD
</button>
</div>
Hiérarchisez et sélectionnez votre contenu, afin d’utiliser une ou deux mises en avant maximum par page, sinon elles attireront moins l’œil de l’utilisateur.
Pour les développeurs
Le titre, matérialisé par la classe fr-callout__title peut être :
- une balise <p> : <p class="fr-callout__title"> , ou
- une balise de titre : <h2 class="fr-callout__title"> à <h6>.
Vous pouvez ainsi adapter le titre du bloc à la structure et l’architecture de votre contenu.
Règles d’utilisation
Usages
Les messages d’erreur, d’alerte ou de confirmation, ne sont pas des mises en avant. Pour utiliser ces blocs, rendez-vous dans la section Notifications (à venir) du DSFR.
Pour concevoir vos contenus éditoriaux vous pouvez vous appuyer sur les typographies , Mise en exergue , Médias (intégrés au contenu) , Tableau .
Accessibilité
Le niveau de titre dépend du contexte (et ne sera pas toujours un <h4>).
Contenus
Les informations mises en avant doivent être synthétiques.
Personnalisation
Certains éléments sont optionnels et les icônes peuvent être changées:
voir la structure du composant.
Couleurs d’accent
Les éléments fond et bordure peuvent utiliser les couleurs illustratives :
|
| Token | Classe css |
Bordure | $border-plain-blue-france Correspondances : | $[couleur]-main (thèmes clair / sombre) exemples : |
.fr-callout--[couleur]
|
Fond | $background-contrast-neutral Correspondances : | $[couleur]-950 (thème clair) exemples: | |
Voir l’ensemble des couleurs illustratives à disposition
Besoin d’aide ?
L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :
la communauté slack pour poser vos questions, et échanger avec d’autres utilisateurs.
Vous êtes agent de l’État et souhaitez accéder au slack ? Rejoignez la communauté dès maintenant !le centre de support pour envoyer vos demandes de correctifs et d'évolution.