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.

Perhaps we can talk about it if you have the time.

A message with a list

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

A message can contain an icon.

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

A message that the user can choose to hide

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').fadeOut(); });

Text Blocks can be hidden

Text Blocks can be set to visible if they need to force themselves to be shown.

You can always see me

A message can float above content that it is related to

Way to go!

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!

A message can be formatted to attach itself to other content

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

Are you sure you know what you're doing?

A message can be formatted to be different colors

Red

Blue

Green

Yellow

A message may be formatted to display warning messages.

Visit our registration page, then try again

A message may be formatted to display information.

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

A message may be formatted to display a success message.

A message may be formatted to display errors.

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

A message can have different sizes

This is a very small message.

This is large

This is huge

This is massive

Types

Text Message

List Message

Icon Message

Dismissable Block

States

Hidden

Visible

Variations

Floating

Compact

Attached

Colored

Warning

Info

Success

Error

Sizes