Get boba!
boba Version 1.7.2

Messages

Messages come in all of boba's colors.

Default Message

This is the default style if no styling is applied.

Red Message

This message uses the .red class.

Orange Message

This message uses the .orange class.

Yellow Message

This message uses the .yellow class.

Green Message

This message uses the .green class.

Teal Message

This message uses the .teal class.

Blue Message

This message uses the .blue class.

Indigo Message

This message uses the .indigo class.

Purple Message

This message uses the .purple class.

Pink Message

This message uses the .pink class.

<div class="message green">
    <div class="message-header">
        <p>Green Message</p>
    </div>
    <div class="message-body">
        <p>Add a <code>.green</code> class</p>
    </div>
</div>

Body-Only

Messages can be used without a header.

Tip

If you're using messages in this way, consider using notifications instead!

I'm a header-less message!

<div class="message">
    <div class="message-body">
        <p>I'm a header-less message!</p>
    </div>
</div>

Styles

Change the look of your messages with ease.

Bordered

Use the .bordered class to add a border around your message.

Default Message

Default style if .bordered is applied

Red Message

.bordered and .red

Body-only with .bordered and .green

<div class="message bordered">
    <div class="message-header">
        <p>Default Message</p>
    </div>
    <div class="message-body">
        <p>This is the default style if <code>.bordered</code> is applied.</p>
    </div>
</div>

<div class="message bordered red">
    <div class="message-header">
        <p>Red Message</p>
    </div>
    <div class="message-body">
        <p>Add both <code>.bordered</code> and <code>.red</code>.</p>
    </div>
</div>

<div class="message bordered green">
    <div class="message-body">
        <p>Add a both <code>.bordered</code> and <code>.green</code> classes and remove the message header.</p>
    </div>
</div>