Notification is an excerpt of text used in design to draw attention to or label something


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>

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.

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

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

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

Guidelines

Notification should:

  • Be used to keep users informed of the status of the system. This includes error, success, warning messages or general information
  • Be used to alert the user that something needs to be corrected or as a form of confirmation for a task that was completed
  • Not have too many for a given action or page as this may annoy the user

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