Alerts

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

Default

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.

Variations

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.

With dismiss

Add a JavaScript enabled (via Crema) dismiss (close) icon on the right of any 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.

Edit this page on GitHub
1 contributorcolebemis
Last edited by colebemis on August 20, 2019