Awesomeness

Messages

Message Types

Classical message boxes in different flavours.

Example

Generic Message

If something is hard to do, then it's not worth doing it. — Homer Simpson

Info Message

Standards are like toothbrushes, everybody agrees you should have one, but no one wants to use yours. — Joe Croser

Success Message

A person tends to critique a design in one of several ways. The most common, and usually least valuable, is by gut reaction. — D. Keith Robinson

Warning Message

I love deadlines. I like the whooshing sound they make as they go by. — Douglas Adams

Error Message

Good design is finding a solution to a problem. Great design is finding the simplest solution to the same problem. — Nicholas Petersen

Imports

  • SASS:
    @import "base";
@import "imports/modules/msg";

Code

<div class="msg">
	<div class="msg__title">Generic Message</div>
	<p class="msg__bd">
		The Awesomeness framework itself uses the flyout as navigation pattern. Since that is the best and most effective way to show you how it works, you will not find an example on this page.
	</p>
</div>
<div class="msg msg--info msg--has-icon">
	<div class="msg__title"><i class="fa fa-fw fa-info-circle"></i>Info Message</div>
	<p class="msg__bd">
		The Awesomeness framework itself uses the flyout as navigation pattern. Since that is the best and most effective way to show you how it works, you will not find an example on this page.
	</p>
</div>
<div class="msg msg--success msg--has-icon">
	<div class="msg__title"><i class="fa fa-fw fa-check"></i>Success Message</div>
	<p class="msg__bd">
		The Awesomeness framework itself uses the flyout as navigation pattern. Since that is the best and most effective way to show you how it works, you will not find an example on this page.
	</p>
</div>
<div class="msg msg--warning msg--has-icon">
	<div class="msg__title"><i class="fa fa-fw fa-warning"></i>Warning Message</div>
	<p class="msg__bd">
		The Awesomeness framework itself uses the flyout as navigation pattern. Since that is the best and most effective way to show you how it works, you will not find an example on this page.
	</p>
</div>
<div class="msg msg--error msg--has-icon">
	<div class="msg__title"><i class="fa fa-fw fa-times"></i>Error Message</div>
	<p class="msg__bd">
		The Awesomeness framework itself uses the flyout as navigation pattern. Since that is the best and most effective way to show you how it works, you will not find an example on this page.
	</p>
</div>