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 :

{"htmlCode":"    <link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1.css\" rel=\"stylesheet\">\n   \n\n    <div class=\"fr-p-1w\">\n\n        <div class=\"fr-callout fr-fi-information-line\">\n            <h4 class=\"fr-callout__title\">Titre mise en avant</h4>\n            <p class=\"fr-callout__text\">\n                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.\n            </p>\n            <button class=\"fr-btn\">\n                Label bouton MD\n            </button>\n        </div>\n    </div>"}
{"htmlCode":"    <link href=\"https://www.gouvernement.fr/sites/default/files/static_assets/dsfrv1.css\" rel=\"stylesheet\">\n   \n\n    <div class=\"fr-p-1w\">\n\n        <div class=\"fr-callout fr-fi-information-line\">\n            <h4 class=\"fr-callout__title\">Titre mise en avant</h4>\n            <p class=\"fr-callout__text\">\n                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.\n            </p>\n            <button class=\"fr-btn\">\n                Label bouton MD\n            </button>\n        </div>\n    </div>\n\n<script>\nsetTimeout(function(){ var html = document.querySelector(\"html\");\nhtml.setAttribute(\"data-fr-theme\",\"dark\"); }, 1000);\n\n</script>"}
<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 rf-callout__title peut être une balise <p> (<p class="fr-callout__title"> ) ou une balise de titre - <h2 class="fr-callout__title"> à <h6> - vous permettant de vous adapter à 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) (blue star) du DSFR.

Pour concevoir vos contenus éditoriaux vous pouvez vous appuyer sur les typographies (blue star) , /wiki/spaces/DOC/pages/591399145 (blue star), /wiki/spaces/DOC/pages/591398926 (blue star), /wiki/spaces/DOC/pages/591399739 (blue star).

Accessibilité

Contenus

Les informations mises en avant doivent être synthétiques.

Personnalisation

Le style de ce composant n’est pas personnalisable.
Toutefois, certains éléments sont optionnels et les icônes peuvent être changées: voir la structure du composant.

note

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :