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.
.flash-success to the flash message to make it yellow, red, or green, respectively.
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.
Add a close icon on the right to allow users to dismiss a flash message.
A flash message with an action button.
A flash message that is full width and removes border and border radius.
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.