Menu

Message
A message displays information that explains nearby content

Types

Message

A basic message

Changes in Service

We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.

List Message

A message with a list

New Site Features
  • You can now have cover images on blog pages
  • Drafts will now auto-save while writing

Icon Message Flexbox

A message can contain an icon.

Have you heard about our mailing list?

Get the best news in your e-mail every day.

Just one second

We're fetching that content for you.

Dismissable Block

A message that the user can choose to hide

Welcome back!

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

Dismissable blocks do not automatically close when using the close icon, this behavior must be defined using Javascript, for example:

$('.message .close') .on('click', function() { $(this) .closest('.message') .transition('fade') ; }) ;

States

Hidden

A message can be hidden

Visible

A message can be set to visible to force itself to be shown.

You can always see me

Variations

Center Aligned

A message can be displayed center aligned

New Version is available!

When are you going to update?

Right Aligned

A message can be displayed right aligned

New Version is available!

When are you going to update?

Floating

A message can float above content that it is related to

Way to go!

Compact

A message can only take up the width of its content.

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

Attached

A message can be formatted to attach itself to other content

Welcome to our site!

Fill out the form below to sign-up for a new account

Submit
Already signed up? Login here instead.

Warning

A message may be formatted to display warning messages.

You must register before you can do that!
Visit our registration page, then try again

Info

A message may be formatted to display information.

Was this what you wanted?
  • It's good to see you again.
  • Did you know it's been a while?

Positive / Success

A message may be formatted to display a positive message.

Positive/Success and Negative/Error messages by default use similar colors, but each has their own color variables that can be distinguished in your theme.
You are eligible for a reward

Go to your special offers page to see now.

Your user registration was successful.

You may now log-in with the username you have chosen

Negative / Error

A message may be formatted to display a negative message.

We're sorry we can't apply that discount

That offer has expired

There were some errors with your submission
  • You must include both a upper and lower case letters in your password.
  • You need to select your home country.

Colored

A message can be formatted to be different colors

Red
Orange
Yellow
Olive
Green
Teal
Blue
Violet
Purple
Pink
Brown
Black

Size

A message can have different sizes

This is a mini message.
This is a tiny message.
This is a small message.
This is large
This is big
This is huge
This is massive

Dimmer Message
Dimmer sub-header