Menu
Menu
UI Collection: Message
5 of 6
Breadcrumb Form Grid Menu Message Table

Message

A message displays information that explains nearby content

Definition Type
Design
Code
Summary
3 Themes
Download

UI Framework

Themable
Build Tools
Choose

Standalone

Default Theme
Precompiled
Choose
Semantic UI
Download ZIP Getting Started

Package Managers

Standalone Message
Download ZIP View GitHub

Package Managers

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

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

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

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 was 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

Black
Yellow
Green
Blue
Orange
Purple
Pink
Red
Teal

Sizes

A message can have different sizes

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

Help Make Semantic UI Better

Maintaining an open source UI library is no small task. Support for the continued development of Semantic UI comes directly from the community.

Contribute
Translation Hub Issue Tracker CLA Create Themes
Semantic Network
Legacy Docs Learn Semantic Semantic Themes Semantic Layouts
The Translation Needs Your Help

This translation is only % complete!

We need your help to make Semantic available to people who speak your language.

Our translation tools are easy to use and allow you to translate text without having to leave the site.

No Thanks
Help Translate
Would you like to visit the mirror site?

Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.

No Thanks
Yes, take me to the mirror

Dimmer Message
Dimmer sub-header