🇫🇷 Système de Design de l’État
Mise en avant - Callout
Raccourci typographique
Publié le 16/05/2024 | Modifié le 23/09/2024
La mise en avant permet à l’utilisateur de distinguer rapidement une information qui vient compléter le contenu consulté.
Règles d’utilisation
Usages
- La mise en avant est une proposition de mise en page du contenu éditorial pour mettre en évidence une information complémentaire.
- Les messages d’erreur, d’alerte ou de confirmation, ne sont pas des mises en avant. Pour ce faire, utilisez des "Alertes".
- 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.
Contenus
- Les informations mises en avant doivent être synthétiques.
Exemple
Titre de mise en avant
SPIP est un système de publication pour l’Internet qui s’attache particulièrement au fonctionnement collectif, au multilinguisme et à la facilité d’emploi.
<dsfr-mise_en_avant|titre=Titre de mise en avant>
SPIP est un système de publication pour l'Internet qui s'attache particulièrement au fonctionnement collectif, au multilinguisme et à la facilité d'emploi.
</dsfr-mise_en_avant>Paramètres du raccourci <dsfr-mise_en_avant>
| Nom du paramètre | Valeur par défaut | Valeur(s) autorisée(s) | |
|---|---|---|---|
| titre | Un titre - optionnel | ||
| icone | Nom de l’icône DSFR de la charte de l’État (ex : thumb-up-line, lightbulb-fill, error-line, etc...) | ||
| couleur | Nom de la couleur illustrative DSFR de la charte de l’État (ex : green-emeraude, brown-caramel, purple-glycine, etc...) | ||
| balise_titre | h3 | h2, h3, h4, h5, h6, p | Le titre, matérialisé par la classe fr-callout__title est par défaut une balise <h3>. Vous pouvez choisir le niveau de titre convenant à l’arborescence de votre page. Une balise <p> si jamais vous estimez qu’il ne s’agit pas d’un titre. |
Une mise en avant par défaut sans titre !
Titre mise en avant `h2`
La mise en avant permet à l’utilisateur de distinguer rapidement une information qui vient compléter le contenu consulté.
<dsfr-mise_en_avant>
Une mise en avant par défaut sans titre !
</dsfr-mise_en_avant>
<dsfr-mise_en_avant|titre=Titre mise en avant `h2`|balise_titre=h2>
La mise en avant permet à l'utilisateur de distinguer rapidement une information qui vient compléter le contenu consulté.
</dsfr-mise_en_avant>
<dsfr-mise_en_avant|titre=SPIP|couleur=pink-tuile|icone=heart-fill>
SPIP est un système de publication pour l'Internet qui s'attache particulièrement au fonctionnement collectif, au multilinguisme et à la facilité d'emploi.
</dsfr-mise_en_avant>