Messages (Messages)

Le composant messages est conçu pour afficher des messages informatifs dans la page. Ces messages peuvent utiliser une icône et un système de couleur afin d’apporter des information sur la nature du message. Ils peuvent aussi apparaître à différents endroits d’une page en fonction du besoin.

Usage

  • Les messages servent le plus souvent à transmette une information temporaire ou circonstanciel, mais il peuvent aussi servir à mettre en évidence une information importante pour l’utilisateur, notamment dans une documentation technique ou une page d’explications.
  • Les messages standards peuvent être utilisés pour afficher 3 types d’information : un message informatif (jaune), un message d’alerte (rouge) et un message de succès (vert).
  • En plus de la couleur, une icône illustre le type du message.
  • Comme tous les types de notifications, le message peut être intrusif pour le lecteur : il peut s’agir d’une information non désirée qui s’ajoute à celle attendue. Son niveau d’intrusion est toutefois modéré si on respecte les bonnes pratiques. Il se situera alors entre la notification « toast » (qui est en limite de vision et visible que quelques secondes) et la popin (qui masque le reste du contenu et bloque l’usage de la page).

Bonnes Pratiques

  • Fermeture : pour un message temporaire ou circonstanciel, une croix de fermeture doit être présente pour permettre à l’utilisateur de supprimer le message.
  • Fréquence : la fréquence des messages ne doit pas être trop importante pour éviter d’entrainer une lassitude ou une banalisation du commposant.
  • Récurrence : les messages déjà fermés par l’utilisateur ne devraient pas être affichés à nouveaux si celui-ci recharge la page ou revient sur la page.
  • Contenu concis : limitez le texte du message à l’essentiel pour qu’il soit rapidement compréhensible. Évitez les messages excessivement longs.
  • Boutons : en plus de la croix de fermeture, les messages ne devraient comporter qu’un seul bouton. Si le but est de donner un choix à l’utilisateur, la pop-in s’impose. Par contre, ce bouton peut-être primaire ou secondaire.
  • Contraste : assurez-vous que le texte et le fond présentent un contraste suffisant pour une lisibilité optimale, même dans des conditions de luminosité variables.
  • Positionnement : les messages peuvent être situés à différents endroit de la page, choisissez bien cette position en fonction de vos besoins en pensant à la gêne qu’ils peuvent occasionner auprès du lecteur.

Style & code

Dépendances :

Messages standards

La structure d’un message est assez proche de celle d’une pop-in. Comme conteneur, il faut un <div> avec les classes su-message et su-message-in qui rend le message visible (par défaut, sans cette classe, le message est invisible). Ensuite, il y a 3 zones : su-close-area pour la croix de fermeture (avec le composant Close button (bouton de fermeture)), su-content-area pour le contenu comportant une icône (portant la classe su-message-icon en plus de su-icon), un titre facultatif et le message proprement dit, ainsi qu’éventuellement une zone pouvant contenir un ou des Buttons (boutons) : su-buttons-area.

Enfin, il faut définir le type de message avec les classes : su-information, su-alert ou su-succes afin d’adapter sa couleur à son type.

Accessibilité

Pour rendre un message accessible, il y a plusieurs règles à respecter :

  1. Sur le conteneur du message proprement dit :
    • role="dialog"
    • aria-labelledby="IDTitre" pour associer le message à son contenu quand il y a un titre ou aria-labelledby="IDContenu" quand il y a un contenu uniquement
    • aria-describedby="IDContenu" pour associer le message à son contenu complémentaire
    • tabindex="-1" pour gérer le focus.
  2. À l’intérieur du message :
    • Mettre un ID sur la zone de titre ou de contenu l’associer à celui-ci avec aria-labelledby.
    • Mettre un ID sur la zone de contenu supplémentaire (s’il y a lieu) du message pour l’associer à celui-ci avec aria-describedby.

Message d’information

<div id="message-1" class="su-message su-message-in su-information" role="dialog" aria-labelledby="message-1-title" aria-describedby="message-1-content" tabindex="-1">
    <div class="su-close-area">
        <button class="su-close" data-sutoggleclass='{"parent":"#message-1","klass":"su-message-in","force":0}' data-sutoggleattribute='{"parent":"#message-1","attr":"aria-hidden","val":"true","force":1}'><i class="su-icon">fermer</i></button>
    </div>
    <div class="su-content-area">
        <i class="su-message-icon su-icon">information</i>
        <p id="message-1-title" class="su-title">Titre</p>
        <div id="message-1-content" class="su-content">
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Description avec <a href="javascript:;" class="surcharge-storybook">un lien</a>.</p>
        </div>
    </div>
    <menu class="su-buttons-area">
        <li><button class="su-button su-primary su-small" href="javascript:;">Bouton primaire</button></li>
    </menu>
</div>

Message d’alerte

<div id="message-2" class="su-message su-message-in su-alert" role="dialog" aria-labelledby="message-2-title" aria-describedby="message-2-content" tabindex="-1">
    <div class="su-close-area">
        <button class="su-close" data-sutoggleclass='{"parent":"#message-2","klass":"su-message-in","force":0}' data-sutoggleattribute='{"parent":"#message-1","attr":"aria-hidden","val":"true","force":1}'><i class="su-icon">fermer</i></button>
    </div>
    <div class="su-content-area">
        <i class="su-message-icon su-icon">alerte</i>
        <p id="message-2-title" class="su-title">Titre</p>
        <div id="message-2-content" class="su-content">
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Description avec <a href="javascript:;" class="surcharge-storybook">un lien</a>.</p>
        </div>
    </div>
    <menu class="su-buttons-area">
        <li><button class="su-button su-primary su-small" href="javascript:;">Bouton primaire</button></li>
    </menu>
</div>

Message de succès

<div id="message-3" class="su-message su-message-in su-success" role="dialog" aria-labelledby="message-3-title" aria-describedby="message-3-content" tabindex="-1">
    <div class="su-close-area">
        <button class="su-close" data-sutoggleclass='{"parent":"#message-3","klass":"su-message-in","force":0}' data-sutoggleattribute='{"parent":"#message-1","attr":"aria-hidden","val":"true","force":1}'><i class="su-icon">fermer</i></button>
    </div>
    <div class="su-content-area">
        <i class="su-message-icon su-icon">valide</i>
        <p id="message-3-title" class="su-title">Titre</p>
        <div id="message-3-content" class="su-content">
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Description avec <a href="javascript:;" class="surcharge-storybook">un lien</a>.</p>
        </div>
    </div>
    <menu class="su-buttons-area">
        <li><button class="su-button su-primary su-small" href="javascript:;">Bouton primaire</button></li>
    </menu>
</div>

Positionnements

SipaUI propose 4 positions basiques différentes : standard (dans le flux), haute scrollable, haute fixe et basse fixe. Toutefois, il est probable que vous deviez gérer des cas particuliers dans votre site (header…) qui imposera de faire du CSS spécifique.

Position dans le flux

Pour le cas standard, c’est le cas par défaut, cf. plus haut.

Position haute scrollable

Un message utilisant la classe su-top sera positionné en haut du son parent relatif le plus proche, il prendra toute sa largeur et sera par-dessus le reste du contenu. Aussi si vous mettez votre composant message à la racine du DOM, il se positionnera en haut de page (relativement au <body>) et il suivra le contenu lors du scroll.

<div id="message-4" class="su-message su-top su-message-in su-information" role="dialog" aria-labelledby="message-4-title" aria-describedby="message-4-content" tabindex="-1">
    <div class="su-close-area">
        <button class="su-close" data-sutoggleclass='{"parent":"#message-4","klass":"su-message-in","force":0}' data-sutoggleattribute='{"parent":"#message-1","attr":"aria-hidden","val":"true","force":1}'><i class="su-icon">fermer</i></button>
    </div>
    <div class="su-content-area">
        <i class="su-message-icon su-icon">valide</i>
        <p id="message-4-title" class="su-title">Titre</p>
        <div id="message-4-content" class="su-content">
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Position haute fixe

De même, un message utilisant la classe su-fixed-top sera aussi positionné en haut du son parent relatif le plus proche, par-dessus le reste du contenu. Par contre, il ne suivra pas le contenu lors du scroll.

<div id="message-5" class="su-message su-fixed-top su-message-in su-information" role="dialog" aria-labelledby="message-5-title" aria-describedby="message-5-content" tabindex="-1">
    <div class="su-close-area">
        <button class="su-close" data-sutoggleclass='{"parent":"#message-5","klass":"su-message-in","force":0}' data-sutoggleattribute='{"parent":"#message-1","attr":"aria-hidden","val":"true","force":1}'><i class="su-icon">fermer</i></button>
    </div>
    <div class="su-content-area">
        <i class="su-message-icon su-icon">valide</i>
        <p id="message-5-title" class="su-title">Titre</p>
        <div id="message-5-content" class="su-content">
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Position basse fixe

Comme pour la position haute fixe, un message utilisant la classe su-fixed-bottom sera aussi positionné par-dessus le reste du contenu et ne suivra pas le contenu lors du scroll, mais il sera en bas du conteneur relatif.

<div id="message-6" class="su-message su-fixed-bottom su-message-in su-information" role="dialog" aria-labelledby="message-6-title" aria-describedby="message-6-content" tabindex="-1">
    <div class="su-close-area">
        <button class="su-close" data-sutoggleclass='{"parent":"#message-6","klass":"su-message-in","force":0}' data-sutoggleattribute='{"parent":"#message-1","attr":"aria-hidden","val":"true","force":1}'><i class="su-icon">fermer</i></button>
    </div>
    <div class="su-content-area">
        <i class="su-message-icon su-icon">valide</i>
        <p id="message-6-title" class="su-title">Titre</p>
        <div id="message-6-content" class="su-content">
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Icône personnalisée

Les icônes affichées en standard, sont celles liées au type de message. Il est toutefois possible d’afficher un autre pictogramme si besoin. Comme pour les boutons avec pictogramme, cela peut-être une autre icône de la fonte, ou un SVG en mode filaire (stroke), en mode remplissage (fill) ou même un SVG multicolore (comme un logo). Dans ce cas, il n’est pas autorisé d’utiliser les types alerte et succès, le message devra rester de la couleur du type information ou éventuellement d’une couleur personnalisée via vos CSS…

Icône de la fonte

Pour utiliser une icône de la fonte dans un message d’information standard, c’est simple, il suffit de remplacer celle proposée par celle voulue.

<div id="message-7" class="su-message su-message-in su-information" role="dialog" aria-labelledby="message-7-title" aria-describedby="message-7-content" tabindex="-1">
    <div class="su-close-area">
        <button class="su-close" data-sutoggleclass='{"parent":"#message-7","klass":"su-message-in","force":0}' data-sutoggleattribute='{"parent":"#message-1","attr":"aria-hidden","val":"true","force":1}'><i class="su-icon">fermer</i></button>
    </div>
    <div class="su-content-area">
        <i class="su-message-icon su-icon">notification</i>
        <p id="message-7-title" class="su-title">Titre</p>
        <div id="message-7-content" class="su-content">
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

Si vous souhaitez personnaliser les couleurs, supprimez la classe su-information et ajoutez vos CSS. Vous pouvez aussi utiliser la classe su-negative pour passer le contenu en clair.

<style>
    #message-8 {background: #0000BC;}
</style>
<div id="message-8" class="su-message su-message-in su-negative" role="dialog" aria-labelledby="message-8-title" aria-describedby="message-8-content" tabindex="-1">
    <div class="su-close-area">
        <button class="su-close" data-sutoggleclass='{"parent":"#message-8","klass":"su-message-in","force":0}' data-sutoggleattribute='{"parent":"#message-1","attr":"aria-hidden","val":"true","force":1}'><i class="su-icon">fermer</i></button>
    </div>
    <div class="su-content-area">
        <i class="su-message-icon su-icon">notification</i>
        <p id="message-8-title" class="su-title">Titre</p>
        <div id="message-8-content" class="su-content">
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

Pictogramme SVG inline en « mode remplissage »

Pour utiliser une pictogramme SVG personnalisé, dont le code est intégré inline il faut supprimer la classe su-icon et remplacer la ligature de la fonte (le mot appelant l’icône) par le code SVG. Il faut par ailleurs remplacer la balise <i>par un <div> ou un <span> puisque le contenu n’est plus textuel. Enfin, pour l’accessibilité, il faut ajouter un texte expliquant ce qu’est l’icône.Pour cela on utilisera un <span class="su-visually-hidden">….

N. B. – Les contraintes concernant ces SVG sont les mêmes que pour le composant Buttons.

<div id="message-9" class="su-message su-message-in su-information" role="dialog" aria-labelledby="message-9-title" aria-describedby="message-9-content" tabindex="-1">
    <div class="su-close-area">
        <button class="su-close" data-sutoggleclass='{"parent":"#message-9","klass":"su-message-in","force":0}' data-sutoggleattribute='{"parent":"#message-1","attr":"aria-hidden","val":"true","force":1}'><i class="su-icon">fermer</i></button>
    </div>
    <div class="su-content-area">
        <div class="su-message-icon">
            <svg viewBox="0 0 17 24" width="17" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" fill-rule="evenodd">
                <path d="M14.348 2.399C12.677.847 10.72.035 8.5.035c-2.387 0-4.416.836-5.872 2.387C1.076 4.092.265 6.05.265 8.271c0 1.073.19 2.123.526 2.911l.023.048c.024.024 1.695 3.151 3.39 6.206C7.832 24 7.951 24 8.5 24c.549 0 .669 0 4.297-6.564 1.694-3.079 3.365-6.182 3.388-6.206l.025-.048c.334-.788.525-1.838.525-2.911 0-2.364-.835-4.393-2.387-5.872zm.549 8.21c-2.005 3.748-5.156 9.5-6.397 11.506-1.241-2.03-4.391-7.758-6.397-11.506-.262-.62-.406-1.456-.406-2.315 0-1.838.669-3.485 1.957-4.869C4.848 2.135 6.495 1.491 8.5 1.491c1.838 0 3.485.67 4.87 1.958 1.289 1.194 1.933 2.84 1.933 4.845 0 .86-.144 1.694-.406 2.315z"/>
                <path d="M8.5 3.807c-1.218 0-2.244.43-3.127 1.337-.907.906-1.336 1.933-1.336 3.127 0 1.217.429 2.242 1.336 3.126.908.907 1.934 1.337 3.127 1.337 1.218 0 2.244-.43 3.126-1.337.908-.907 1.337-1.934 1.337-3.126 0-1.218-.43-2.244-1.337-3.127-.882-.907-1.908-1.337-3.126-1.337zm2.125 6.612c-.62.62-1.313.906-2.125.906-.835 0-1.503-.285-2.124-.906-.62-.62-.907-1.313-.907-2.125 0-.835.287-1.504.907-2.125.62-.62 1.312-.906 2.124-.906s1.504.286 2.125.906c.62.62.906 1.313.906 2.125s-.286 1.48-.906 2.125z"/>
            </svg>
            <span class="su-visually-hidden">Localisation</span>
        </div>
        <p id="message-9-title" class="su-title">Titre</p>
        <div id="message-9-content" class="su-content">
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

Il est aussi possible d’utiliser des couleurs personnalisées et la classe su-negative.

<style>
    #message-10 {background: #0000BC;}
</style>
<div id="message-10" class="su-message su-message-in su-negative" role="dialog" aria-labelledby="message-10-title" aria-describedby="message-10-content" tabindex="-1">
    <div class="su-close-area">
        <button class="su-close" data-sutoggleclass='{"parent":"#message-10","klass":"su-message-in","force":0}' data-sutoggleattribute='{"parent":"#message-1","attr":"aria-hidden","val":"true","force":1}'><i class="su-icon">fermer</i></button>
    </div>
    <div class="su-content-area">
        <div class="su-message-icon">
            <svg viewBox="0 0 17 24" width="17" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" fill-rule="evenodd">
                <path d="M14.348 2.399C12.677.847 10.72.035 8.5.035c-2.387 0-4.416.836-5.872 2.387C1.076 4.092.265 6.05.265 8.271c0 1.073.19 2.123.526 2.911l.023.048c.024.024 1.695 3.151 3.39 6.206C7.832 24 7.951 24 8.5 24c.549 0 .669 0 4.297-6.564 1.694-3.079 3.365-6.182 3.388-6.206l.025-.048c.334-.788.525-1.838.525-2.911 0-2.364-.835-4.393-2.387-5.872zm.549 8.21c-2.005 3.748-5.156 9.5-6.397 11.506-1.241-2.03-4.391-7.758-6.397-11.506-.262-.62-.406-1.456-.406-2.315 0-1.838.669-3.485 1.957-4.869C4.848 2.135 6.495 1.491 8.5 1.491c1.838 0 3.485.67 4.87 1.958 1.289 1.194 1.933 2.84 1.933 4.845 0 .86-.144 1.694-.406 2.315z"/>
                <path d="M8.5 3.807c-1.218 0-2.244.43-3.127 1.337-.907.906-1.336 1.933-1.336 3.127 0 1.217.429 2.242 1.336 3.126.908.907 1.934 1.337 3.127 1.337 1.218 0 2.244-.43 3.126-1.337.908-.907 1.337-1.934 1.337-3.126 0-1.218-.43-2.244-1.337-3.127-.882-.907-1.908-1.337-3.126-1.337zm2.125 6.612c-.62.62-1.313.906-2.125.906-.835 0-1.503-.285-2.124-.906-.62-.62-.907-1.313-.907-2.125 0-.835.287-1.504.907-2.125.62-.62 1.312-.906 2.124-.906s1.504.286 2.125.906c.62.62.906 1.313.906 2.125s-.286 1.48-.906 2.125z"/>
            </svg>
            <span class="su-visually-hidden">Localisation</span>
        </div>
        <p id="message-10-title" class="su-title">Titre</p>
        <div id="message-10-content" class="su-content">
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

Pictogramme SVG inline en « mode filaire »

Pour utiliser une pictogramme SVG intégré inline en mode filaire, en plus de supprimer la classe su-icon et remplacer la ligature de la fonte (le mot appelant l’icône) par le code SVG, il faut ajouter la classe su-stroke à côté de su-message-icon.

<div id="message-11" class="su-message su-message-in su-information" role="dialog" aria-labelledby="message-11-title" aria-describedby="message-11-content" tabindex="-1">
    <div class="su-close-area">
        <button class="su-close" data-sutoggleclass='{"parent":"#message-11","klass":"su-message-in","force":0}' data-sutoggleattribute='{"parent":"#message-1","attr":"aria-hidden","val":"true","force":1}'><i class="su-icon">fermer</i></button>
    </div>
    <div class="su-content-area">
        <div class="su-message-icon su-stroke">
            <svg width="24" height="24" viewBox="0 0 24 24">
              <path style="stroke-linecap:round;stroke-linejoin:round;stroke-width:2;" d="M3 6.7A11 11 0 0 1 5.8 3M21 6.7A11 11 0 0 0 18.2 3M9 17v1a3 3 0 0 0 6 0v-1M10 5a2 2 0 0 1 4 0 7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6"></path>
            </svg>
            <span class="su-visually-hidden">Notification</span>
        </div>
        <p id="message-11-title" class="su-title">Titre</p>
        <div id="message-11-content" class="su-content">
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

Pour utiliser des couleurs personnalisées et la classe su-negative.

<style>
    #message-12 {background: #0000BC;}
</style>
<div id="message-12" class="su-message su-message-in su-negative" role="dialog" aria-labelledby="message-12-title" aria-describedby="message-12-content" tabindex="-1">
    <div class="su-close-area">
        <button class="su-close" data-sutoggleclass='{"parent":"#message-12","klass":"su-message-in","force":0}' data-sutoggleattribute='{"parent":"#message-1","attr":"aria-hidden","val":"true","force":1}'><i class="su-icon">fermer</i></button>
    </div>
    <div class="su-content-area">
        <div class="su-message-icon su-stroke">
            <svg width="24" height="24" viewBox="0 0 24 24">
              <path style="stroke-linecap:round;stroke-linejoin:round;stroke-width:2;" d="M3 6.7A11 11 0 0 1 5.8 3M21 6.7A11 11 0 0 0 18.2 3M9 17v1a3 3 0 0 0 6 0v-1M10 5a2 2 0 0 1 4 0 7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6"></path>
            </svg>
            <span class="su-visually-hidden">Notification</span>
        </div>
        <p id="message-12-title" class="su-title">Titre</p>
        <div id="message-12-content" class="su-content">
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

Pictogramme externe

Il est enfin possible d’utiliser une image externe, appelée par une URL via la balise <img>, mais il est alors impossible de changer la couleur de cette image. Ne pas oublier de renseigner l’attribut alt="" qui remplacera le <span class="su-visually-hidden">….

<div id="message-13" class="su-message su-message-in su-information" role="dialog" aria-labelledby="message-13-title" aria-describedby="message-13-content" tabindex="-1">
    <div class="su-close-area">
        <button class="su-close" data-sutoggleclass='{"parent":"#message-13","klass":"su-message-in","force":0}' data-sutoggleattribute='{"parent":"#message-1","attr":"aria-hidden","val":"true","force":1}'><i class="su-icon">fermer</i></button>
    </div>
    <div class="su-content-area">
        <div class="su-message-icon su-stroke">
            <img src="https://media.ouest-france.fr/v1/fonts/af94db414b61b0a9859024d6cc2c208e-picto-jo.svg" alt="Logo des jeux Olympiques 2024">
        </div>
        <p id="message-13-title" class="su-title">Titre</p>
        <div id="message-13-content" class="su-content">
            <p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

Liste des classes disponibles

  • su-message
  • su-message-in
  • su-information
  • su-alert
  • su-success
  • su-top
  • su-fixed-top
  • su-fixed-bottom
  • su-close-area
  • su-content-area
  • su-buttons-area
  • su-message-icon
  • su-content
  • su-stroke

Classes anexes

Le code a bien été copié !