Composant mise en avant

Ce composant permet de créer une mise en avant DSFR.

Mise en avant simple

Avec icône

Information importante

C'est une mise en avant importante.

Extrait de code

/// callout | Information importante
C'est une mise en avant **importante**.
///

Options de la mise en avant

Option	Valeur par défaut	Description
color		Couleur du badge, si aucun type choisi. A choisir dans la palette DSFR. Par exemple green-menthe
markup	p	Type de balise pour le titre. Valeurs possibles : "p", "h1", "h2", "h3", "h4", "h5", "h6"
icon		Icône à afficher. Si vide, pas d'icône.
link_label		Texte du lien cliquable dans le bandeau. Si vide, aucun lien n'est affiché.
link_url		URL du lien cliquable dans le bandeau.
link_newtab	False	Ouvre le lien cliquable dans un nouvel onglet.

Autres exemples de mises en avant

Avec icône

Information importante

C'est une mise en avant importante.

Extrait de code

/// callout | Information importante
    icon: info-line
C'est une mise en avant **importante**.
///

Avec bouton

Information importante

C'est une mise en avant importante.

Extrait de code

/// callout | Information importante
    link_label: En savoir plus
    link_url: https://www.example.com/
    link_newtab: true
C'est une mise en avant **importante**.
///

Diverses personnalisations

Information importante

C'est une mise en avant importante.

Extrait de code

/// callout | Information importante
    markup: h5
    color: green-menthe
    icon: medal-fill
    link_label: En savoir plus
    link_url: https://www.example.com/
    link_newtab: true
C'est une mise en avant **importante**.
///