Notification

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