29 #messages Messages
Messages is a component that is used for displaying different types of messages like:
- info (by default)
- status
- warning
- error
- live
The component messages is defined "info" by default, the "info" type doesn't exist as class. The "live" type is meant to be used in cases like live streaming for events.
Examples
close×
Lorem ipsum lor sit amet, consectetur adipi
close×
Lorem ipsum lor sit amet, consectetur adipi
close×
Warning message: Some warning title
messages--icon-center
Centralized icon
messages--form
Messages used in custom forms
<div class="messages info alert [modifier class]">
<a href="#" class="close" aria-label="Close this message" data-dismiss="alert"><span>close</span>×</a>
<p>Lorem ipsum lor sit amet, consectetur adipi</p>
</div>
<div class="messages warning alert [modifier class]">
<a href="#" class="close" aria-label="Close this message" data-dismiss="alert"><span>close</span>×</a>
<span class="h3"><span class="sr-only">Warning message: </span>Some warning title</span>
<p>Lorem ipsum lor sit amet, consectetur adipi</p>
</div>
<div class="messages status alert [modifier class]">
<a href="#" class="close" aria-label="Close this message" data-dismiss="alert"><span>close</span>×</a>
<span class="h3"><span class="sr-only">Status message: </span>Some status title</span>
<p>Lorem ipsum lor sit amet, consectetur adipi</p>
</div>
<div class="messages error alert messages--error [modifier class]">
<a href="#" class="close" aria-label="Close this message" data-dismiss="alert"><span>close</span>×</a>
<p>Lorem ipsum lor sit amet, consectetur adipi</p>
</div>
<div class="messages live alert [modifier class]">
<a href="#" class="close" aria-label="Close this message" data-dismiss="alert"><span>close</span>×</a>
<span class="h3"><span class="sr-only">Live streaming message: </span>Some livestream title</span>
<p>Lorem ipsum lor sit amet, consectetur adipi</p>
</div>
<div class="messages warning alert [modifier class]">
<a href="#" class="close" aria-label="Close this message" data-dismiss="alert"><span>close</span>×</a>
<span class="h3"><span class="sr-only">Warning message: </span>Some warning title</span>
</div>