Mise en avant - Callout

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

  • Un titre avec la directive "dsmjCalloutTitle" - optionnel
  • Une description avec la directive "dsmjCalloutDescription" - obligatoire
  • Un bouton ou un lien avec la directive "dsmjButton" - optionnel qui permet d’inciter à l’action ou pour naviguer vers un autre contenu.

Exemple d'utilisation

Juste la description

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.

Avec une icône et un titre

Titre mis en avant

Une icône d'une balance

Avec toutes les propriétés utilisées et un bouton

Titre mis en avant

Le bouton ouvre un message d'alerte

Avec un lien et une icône "home"

Titre mis en avant

Le clique sur le bouton redirige vers la page d'accueil

Accueil

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 "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.

Accessibilité

  • Le niveau de titre dépend du contexte (et ne sera pas toujours un <h3>)
  • La balise doit respecter les règles du DSFR, ainsi si il s'agit d'un lien il faudra utiliser la balise <a> sinon la balise <button>
  • Le bouton doit respecter les règles de son composant, lien vers bouton

Contenus

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

Personnalisation

Les couleurs disponibles sont les suivantes:

La liste des icônes est disponible ici: DSFR Icônes