Notification

Les notifications contiennent une icône, un texte, et optionnellement un CTA.

Code de base

Ajoutez la facette .has-description pour aligner correctement l'icône.

Aperçu

Mode responsive

Notification

                                                                <div class="notification has-body has-description">
                                        <div class="icon">
                                            <i class="tri-bell" aria-hidden="true"></i>
                                        </div>
                                        <div class="body">
                                            <p class="title is-5">Notification</p>
                                        </div>
                                    </div>

Déclinaison de couleur

Aperçu

Mode responsive

Notification

                                                                <div class="notification is-primary has-body has-description">
                                        <div class="icon">
                                            <i class="tri-bell" aria-hidden="true"></i>
                                        </div>
                                        <div class="body">
                                            <p class="title is-5">Notification</p>
                                        </div>
                                    </div>
                                    <div class="notification is-info has-body has-description">
                                        <div class="icon">
                                            <i class="tri-bell" aria-hidden="true"></i>
                                        </div>
                                        <div class="body">
                                            <p class="title is-5">Notification</p>
                                        </div>
                                    </div>
                                    <div class="notification is-success has-body has-description">
                                        <div class="icon" aria-label="Succès">
                                            <i class="tri-bell" aria-hidden="true"></i>
                                        </div>
                                        <div class="body">
                                            <p class="title is-5">Notification</p>
                                        </div>
                                    </div>
                                    <div class="notification is-warning has-body has-description">
                                        <div class="icon" aria-label="Attention">
                                            <i class="tri-bell" aria-hidden="true"></i>
                                        </div>
                                        <div class="body">
                                            <p class="title is-5">Notification</p>
                                        </div>
                                    </div>

ACCESSIBILITY

Si la couleur ou l'icone a un sens sémantique, préciser ce sens dans le texte de la notification ou l'aria-label de l'icone pour rester conforme aux exigences d'accessibilité.

Avec texte additionnel

Aperçu

Mode responsive

Notification

Reprehenderit eiusmod duis eu consectetur deserunt enim esse est do mollit. Aliqua et velit et culpa nulla veniam tempor veniam voluptate nulla. Nisi est sunt incididunt irure in ullamco eiusmod sunt. Reprehenderit incididunt labore qui culpa cillum eiusmod ex non aute ea Lorem. Incididunt laborum quis consequat commodo laborum consectetur id anim elit pariatur.

                                                                <div class="notification has-description has-body">
                                        <div class="icon">
                                            <i class="tri-bell" aria-hidden="true"></i>
                                        </div>
                                        <div class="body">
                                            <p class="title is-5">Notification</p>
                                            <p>Reprehenderit eiusmod duis eu consectetur deserunt enim esse est do mollit. Aliqua et velit et culpa nulla veniam tempor veniam voluptate nulla. Nisi est sunt incididunt irure in ullamco eiusmod sunt. Reprehenderit incididunt labore qui culpa cillum eiusmod ex non aute ea Lorem. Incididunt laborum quis consequat commodo laborum consectetur id anim elit pariatur.</p>
                                        </div>
                                    </div>

Avec texte additionnel et CTA

Aperçu

Mode responsive

Notification

Valider

Notification

Valider

Notification

Valider

Notification

Valider

                                                                <div class="notification is-primary has-body has-description">
                                        <div class="icon">
                                            <i class="tri-bell" aria-hidden="true"></i>
                                        </div>
                                        <div class="body">
                                            <p class="title is-5">Notification</p>
                                        </div>
                                        <div class="call-to-action">
                                            <a class="button">Valider</a>
                                        </div>
                                    </div>
                                    <div class="notification is-info has-body has-description">
                                        <div class="icon">
                                            <i class="tri-bell" aria-hidden="true"></i>
                                        </div>
                                        <div class="body">
                                            <p class="title is-5">Notification</p>
                                        </div>
                                        <div class="call-to-action">
                                            <a class="button">Valider</a>
                                        </div>
                                    </div>
                                    <div class="notification is-success has-body has-description">
                                        <div class="icon" aria-label="Succès">
                                            <i class="tri-bell" aria-hidden="true"></i>
                                        </div>
                                        <div class="body">
                                            <p class="title is-5">Notification</p>
                                        </div>
                                        <div class="call-to-action">
                                            <a class="button">Valider</a>
                                        </div>
                                    </div>
                                    <div class="notification is-warning has-body has-description">
                                        <div class="icon" aria-label="Attention">
                                            <i class="tri-bell" aria-hidden="true"></i>
                                        </div>
                                        <div class="body">
                                            <p class="title is-5">Notification</p>
                                        </div>
                                        <div class="call-to-action">
                                            <a class="button">Valider</a>
                                        </div>
                                    </div>

Avec chevron en guise de CTA

Aperçu

Mode responsive

Notification

Un texte un peu long. Un texte un peu long. Un texte un peu long. Un texte un peu long. Un texte un peu long.

                                                                <div class="notification has-description has-body">
                                        <div class="icon">
                                            <i class="tri-bell" aria-hidden="true"></i>
                                        </div>
                                        <div class="body">
                                            <p class="title is-5">Notification</p>
                                            <p>Un texte un peu long. Un texte un peu long. Un texte un peu long. Un texte un peu long. Un texte un peu long. </p>
                                        </div>
                                        <div class="call-to-action">
                                            <i class="tri-arrow-right-r" aria-hidden="true"></i>
                                        </div>
                                    </div>

Simple message informatif

Aperçu

Mode responsive

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

                                                                <div class="notification is-small has-body">
                                        <div class="icon">
                                            <i class="tri-infos-circle" aria-hidden="true"></i>
                                        </div>
                                        <div class="body">
                                            <p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
                                        </div>
                                    </div>
                                        <div class="notification is-small has-body is-info">
                                            <div class="icon">
                                                <i class="tri-infos-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="body">
                                                <p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
                                            </div>
                                        </div>
                                    <div class="notification is-small has-body is-success">
                                        <div class="icon" aria-label="Succès">
                                            <i class="tri-check-circle" aria-hidden="true"></i>
                                        </div>
                                        <div class="body">
                                            <p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
                                        </div>
                                    </div>
                                    <div class="notification is-small has-body is-warning">
                                        <div class="icon" aria-label="Attention">
                                            <i class="tri-exclamation-circle" aria-hidden="true"></i>
                                        </div>
                                        <div class="body">
                                            <p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
                                        </div>
                                    </div>
                                    <div class="notification is-small has-body is-danger">
                                        <div class="icon" aria-label="Danger">
                                            <i class="tri-exclamation-circle" aria-hidden="true"></i>
                                        </div>
                                        <div class="body">
                                            <p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
                                        </div>
                                    </div>

S'apparentant à une bannière
draft

Ajoutez la classe is-banner pour supprimer ombre, bordures, taille de l'icone, etc.

Aperçu

Mode responsive

Texte sur une ligne

                                                                <div class="notification is-banner has-description has-body">
                                        <div class="icon">
                                            <i class="tri-sim-card" aria-hidden="true"></i>
                                        </div>
                                        <div class="body">
                                            <p>Texte sur une ligne</p>
                                        </div>
                                    </div>

Notification

Les notifications contiennent une icône, un texte, et optionnellement un CTA.

Code de base

Déclinaison de couleur

Avec texte additionnel

Avec texte additionnel et CTA

Avec chevron en guise de CTA

Simple message informatif

S'apparentant à une bannière draft

S'apparentant à une bannière
draft