--- layout : 'default' css : 'text' title : 'Message' description : 'Messages alert a user to information they must immediately consider before proceeding on to the normal content of the page' type : 'UI Collection' --- <%- @partial('header') %>

Types

Text Message

A basic message

Welcome back!

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.

List Message

A message with a list

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

Icon Message

A message can contain an icon.

Have you heard about our mailing list?

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

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.

States

Hidden

Text Blocks can be hidden

Visible

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

You can always see me

Variations

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

Have you heard about our mailing list?

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

Let's go ahead and get you signed up.

Submit
Are you sure you know what you're doing?

Colored

A message can be formatted to be different colors

Red
Blue
Green
Yellow

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?

Success

A message may be formatted to display a success message.

Congratulations, you are now a member!

Error

A message may be formatted to display errors.

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

Sizes

A message can have different sizes

This is a very small message.
This is large
This is huge
This is massive