Notifications

Notification blocks, to alert your users of something.

Simple notification

Something just happened

<div class="notification">
    <div class="notification-body">
        <h5 class="title is-6">Simple notification</h5>
        <p>Something just happened</p>
    </div>
</div>

Icons

You can use an icon at the left side of the notification:

Simple notification w/ icon

Something just happened

<div class="notification">
    <div class="icon">
        <i class="fas fa-cat"></i>
    </div>
    <div class="notification-body">
        <h5 class="title is-6">Simple notification w/ icon</h5>
        <p>Something just happened</p>
    </div>
</div>

Delete

You can also add a delete button:

Simple notification w/ icon

Something just happened

<div class="notification">
    <div class="icon">
        <i class="fas fa-cat"></i>
    </div>
    <div class="notification-body">
        <h5 class="title is-6">Simple notification w/ icon</h5>
        <p>Something just happened</p>
    </div>
    <a class="delete"></a>
</div>

No Javascript

Leaf does not include JavaScript. If you want to close o remove a notification you will have to implement the interaction yourself.

Colors

PRIMARY

Something just happened

ACCENT

Something just happened

ACCENT ALT

Something just happened

SUCCESS

Something was successful

LIGHT SUCCESS

Something was successful

WARNING

Wait, something's not right...

LIGHT WARNING

Wait, something's not right...

DANGER

Oops! Something goofed!

LIGHT DANGER

Oops! Something goofed!

<!--  Primary -->
<div class="notification is-primary">
    <div class="icon">
        <i class="fas fa-cat"></i>
    </div>
    <div class="notification-body">
        <h5 class="title is-6">PRIMARY</h5>
        <p>Something just happened</p>
    </div>
    <a href="#" class="delete"></a>
</div>
<!--  Accent -->
<div class="notification is-accent">
    <div class="icon">
        <i class="fas fa-cat"></i>
    </div>
    <div class="notification-body">
        <h5 class="title is-6">ACCENT</h5>
        <p>Something just happened</p>
    </div>
    <a href="#" class="delete"></a>
</div>
<!--  Accent alt -->
<div class="notification is-accent-alt">
    <div class="icon">
        <i class="fas fa-cat"></i>
    </div>
    <div class="notification-body">
        <h5 class="title is-6">ACCENT ALT</h5>
        <p>Something just happened</p>
    </div>
    <a href="#" class="delete"></a>
</div>
<!--  Success -->
<div class="notification is-success">
    <div class="icon">
        <i class="fas fa-check-double"></i>
    </div>
    <div class="notification-body">
        <h5 class="title is-6">SUCCESS</h5>
        <p>Something was successful</p>
    </div>
    <a href="#" class="delete"></a>
</div>
<!--  Light Success -->
<div class="notification is-light-success">
    <div class="icon">
        <i class="fas fa-check-double"></i>
    </div>
    <div class="notification-body">
        <h5 class="title is-6">LIGHT SUCCESS</h5>
        <p>Something was successful</p>
    </div>
    <a href="#" class="delete"></a>
</div>
<!--  Warning -->
<div class="notification is-warning">
    <div class="icon">
        <i class="fas fa-exclamation"></i>
    </div>
    <div class="notification-body">
        <h5 class="title is-6">WARNING</h5>
        <p>Wait, something's not right...</p>
    </div>
    <a href="#" class="delete"></a>
</div>
<!--  Light Warning -->
<div class="notification is-light-warning">
    <div class="icon">
        <i class="fas fa-exclamation"></i>
    </div>
    <div class="notification-body">
        <h5 class="title is-6">WARNING</h5>
        <p>Wait, something's not right...</p>
    </div>
    <a href="#" class="delete"></a>
</div>
<!--  Danger -->
<div class="notification is-danger">
    <div class="icon">
        <i class="fas fa-exclamation-circle"></i>
    </div>
    <div class="notification-body">
        <h5 class="title is-6">DANGER</h5>
        <p>Oops! Something goofed!</p>
    </div>
    <a href="#" class="delete"></a>
</div>
<!--  Light Danger -->
<div class="notification is-light-danger">
    <div class="icon">
        <i class="fas fa-exclamation-circle"></i>
    </div>
    <div class="notification-body">
        <h5 class="title is-6">LIGHT DANGER</h5>
        <p>Oops! Something goofed!</p>
    </div>
    <a href="#" class="delete"></a>
</div>

Bordered

Bordered notification

Something just happened

Bordered notification

Something just happened

Bordered notification

Something just happened

Bordered notification

Something just happened

<div class="notification is-primary is-bordered">
    <div class="icon">
        <i class="fas fa-cat"></i>
    </div>
    <div class="notification-body">
        <h5 class="title is-6">Bordered notification</h5>
        <p>Something just happened</p>
    </div>
    <a class="delete"></a>
</div>
<div class="notification is-accent is-bordered">
    <div class="icon">
        <i class="fas fa-cat"></i>
    </div>
    <div class="notification-body">
        <h5 class="title is-6">Bordered notification</h5>
        <p>Something just happened</p>
    </div>
    <a class="delete"></a>
</div>
<div class="notification is-success is-bordered">
    <div class="icon">
        <i class="fas fa-cat"></i>
    </div>
    <div class="notification-body">
        <h5 class="title is-6">Bordered notification</h5>
        <p>Something just happened</p>
    </div>
    <a class="delete"></a>
</div>
<div class="notification is-danger is-bordered">
    <div class="icon">
        <i class="fas fa-cat"></i>
    </div>
    <div class="notification-body">
        <h5 class="title is-6">Bordered notification</h5>
        <p>Something just happened</p>
    </div>
    <a class="delete"></a>
</div>

Variables

Name Type Value Computed value
$notification-default-color color $grey-light
rgb(185, 185, 185)
$notification-padding-sides size 1.125rem
$notification-padding size .825rem $notification-padding-sides .825rem 1.125rem
$notification-border-left-width size 5px
$notification-shadow shadow settings 0 4px 8px rgba($black, 0.1)
$notification-title-margin size .5rem
$notification-body-padding size 0 1rem 0 0
$notification-bordered-border-width size 1px
← Pagination →