Overview

Notifications provide short, timely, and relevant information for your users.

---

Types

1) Default Notification

Updates

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci aut dicta, ea facere fugit incidunt laborum officia quod unde.

<div class="sgds-notification">
    <div class="sgds-notification-detail">
        <div class="sgds-notification-content">
            <p class="has-text-weight-bold">Updates</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci aut
                dicta, ea facere fugit incidunt laborum officia quod unde.
            </p>
        </div>
        <span class="delete" id="cancel-notification"></span>
    </div>
</div>

---

2) With Icon

Updates

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci aut dicta, ea facere fugit incidunt laborum officia quod unde.

<div class="sgds-notification">
    <div class="sgds-notification-detail">
        <span class="sgds-icon sgds-icon-callout is-size-4"></span>
        <div class="sgds-notification-content">
            <p class="has-text-weight-bold">Updates</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci aut
                dicta, ea facere fugit incidunt laborum officia quod unde.
            </p>
        </div>
        <span class="delete" id="cancel-notification"></span>
    </div>
</div>

---

3) Toast Notification

Updates

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci aut dicta, ea facere fugit incidunt laborum officia quod unde.

<div class="sgds-notification is-toast">
    <div class="sgds-notification-detail">
        <div class="sgds-notification-content">
            <p class="has-text-weight-bold">Updates</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci aut
                dicta, ea facere fugit incidunt laborum officia quod unde.
            </p>
        </div>
        <span class="delete" id="cancel-notification"></span>
    </div>
</div>

---

4) Toast Notification with Icon

Updates

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci aut dicta, ea facere fugit incidunt laborum officia quod unde.

<div class="sgds-notification is-toast">
    <div class="sgds-notification-detail">
        <span class="sgds-icon sgds-icon-circle-info is-size-4"></span>
        <div class="sgds-notification-content">
            <p class="has-text-weight-bold">Updates</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci aut
                dicta, ea facere fugit incidunt laborum officia quod unde.
            </p>
        </div>
        <span class="delete" id="cancel-notification"></span>
    </div>
</div>

---

Style

Modifier	Description
is-toast	Converts the default notification to a toast notification with borders
is-*color*	Replace colorState with contextual text color classes (is-danger, is-warning, is-success etc.) for various background color. Can be use with toast notification sgds-notification is toast is-danger

---

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component