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


Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team