Notification

The notification component allows you to display critical or important information that the users need to be aware of.


Default Notification

Updates

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

Component Code
<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>

Default Notification with Icon

Updates

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

Component Code
<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>

Default Toast Notification

Updates

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

Component Code
<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>

Default 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.

Component Code
<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