Messages

Text Message

A basic message

It's good to see you again. I have had a lot to think about since our last visit, I've changed much as a person and I can see that you have too.

<div class="wojo message">
  <div class="header">
    Welcome back!
  </div>
  <p>
    ...
  </p>
</div>

List Message

A message with a list

It's good to see you again.
Did you know it's been a while?

<div class="wojo message">
  <div class="header">
    Welcome back!
  </div>
  <ul class="list">
    <li>It's good to see you again.</li>
    <li>Did you know it's been a while?</li>
  </ul>
</div>

Icon Message

A message can contain an icon.

Get all the best inventions in your e-mail every day. Sign up now!

<div class="wojo icon message">
  <i class="inbox icon"></i>
  <div class="content">
    <div class="header">
      Have you heard about our mailing list?
    </div>
    <p>...</p>
  </div>
</div>

Dismissable Block

A message that the user can choose to hide.

This is a special notification which you can dismiss if you're bored with it.

<div class="wojo message"> <i class="close icon"></i>
  <div class="header"> Welcome back! </div>
  <p>This is a ...</p>
</div>

Colored

A message can be formatted to be different colors.

Red

Blue

Green

Yellow

<div class="wojo negative message">Red</div>
<div class="wojo info message">Blue</div>
<div class="wojo positive message">Green</div>
<div class="wojo warning message">Yellow</div>