Skip to content


Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don't show more than one at a time.


Flash messages start off looking decently neutral—they're just light blue rounded rectangles.

You can put multiple paragraphs of text in a flash message—the last paragraph's bottom margin will be automatically override.

Should the need arise, you can quickly space out your flash message from surrounding content with a .flash-messages wrapper. Note the extra top and bottom margin in the example below.


Add .flash-warn, .flash-error, or .flash-success to the flash message to make it yellow, red, or green, respectively.

With icon

Add an icon to the left of the flash message to give it some funky fresh attention.

When using a 24px icon, add a .v-align-bottom class and increase the font-size with .f4 for a more balanced alignment.

With dismiss

Add a close icon on the right to allow users to dismiss a flash message.

With action button

A flash message with an action button.

Full width flash

A flash message that is full width and removes border and border radius.

Flash banner

A flash message that is fixed positioned at the top of the page. Use for more global events where the content of the page is unknown.

Edit this page on GitHub
2 contributorssimuraicolebemis
Last edited by simurai on July 21, 2020