Fork me on GitHub

Aoi (青い) style guide

Messages

Use the msg class on a block element to style it as a message container.

Hey y'all!

<div class="msg">
    <p>Hey y'all!</p>
</div>

Cued messages

Additionally, you can set a level modifier of accent (default), error, warning, info, or success to give it a semantic cue.

There was an error

This is a warning

Here is some info

Things are going well

<div class="msg error">
    <p>There was an error</p>
</div>

<div class="msg warning">
    <p>This is a warning</p>
</div>

<div class="msg info">
    <p>Here is some info</p>
</div>

<div class="msg success">
    <p>Things are going well</p>
</div>

Messages with icons

Finally, setting a modifier of msg-icon, the message will include an icon.

Hello there!

There was an error

This is a warning

Here is some info

Things are going well

<div class="msg msg-icon">
    <p>Hello there!</p>
</div>

<div class="msg msg-icon error">
    <p>There was an error</p>
</div>

<div class="msg msg-icon warning">
    <p>This is a warning</p>
</div>

<div class="msg msg-icon info">
    <p>Here is some info</p>
</div>

<div class="msg msg-icon success">
    <p>Things are going well</p>
</div>