Get boba!
boba Version 1.7.2

Notifications

Notifications come in all of boba's colors.

This is the default style if no styling is applied.

This notification uses the .red class.

This notification uses the .orange class.

This notification uses the .yellow class.

This notification uses the .green class.

This notification uses the .teal class.

This notification uses the .blue class.

This notification uses the .indigo class.

This notification uses the .purple class.

This notification uses the .pink class.

<div class="notification green">
    <p>Add a <code>.green</code> class</p>
</div>

Styles

Change the look of your notifications with ease.

Filled

Use the .filled class to fill your notifications with a solid color.

I'm a filled notification!

I'm a filled, blue notification!

<div class="notification filled">
    <p>I'm a filled notification!> class</p>
</div>

<div class="notification blue filled">
    <p>I'm a filled, blue notification!> class</p>
</div>

Bordered

Add a border around your notification using the .bordered class.

I'm a bordered, red notification!

I'm a bordered, green notification!

<div class="notification bordered red">
    <p>I'm a bordered, red notification!> class</p>
</div>

<div class="notification bordered green">
    <p>I'm a bordered, green notification!> class</p>
</div>

Outlined

Use the .outlined class to make your notifications colored outlines.

I'm an outlined notification!

I'm an outlined, red notification!

<div class="notification outlined">
    <p>I'm an outlined notification!> class</p>
</div>

<div class="notification red outlined">
    <p>I'm an outlined, red notification!> class</p>
</div>