Alert message for a positive response to an action
<div class="o-message o-message--alert o-message--success" data-o-component="o-message">
<div class="o-message__container">
<div class="o-message__content ">
<p class="o-message__content-main">
<span class="o-message__content-highlight">
Hooray!
</span>
The quick brown fox jumped over the lazy dogs!
</p>
<div class="o-message__actions">
<a href="#" class="o-message__actions__primary">Button</a>
<a href="#" class="o-message__actions__secondary">Text link</a>
</div>
</div>
</div>
</div>Alert message for a positive response to an action, styled to fit within another container
<div class="demo-inner-message">
<div class="o-message o-message--alert o-message--inner o-message--success" data-o-component="o-message">
<div class="o-message__container">
<div class="o-message__content ">
<p class="o-message__content-main">
<span class="o-message__content-highlight">
Hooray!
</span>
The quick brown fox jumped over the lazy dogs!
</p>
<p class="o-message__content-additional">Did you know that that sentence uses all of the letters in the alphabet at least once?</p>
<div class="o-message__actions">
<a href="#" class="o-message__actions__primary">Button</a>
<a href="#" class="o-message__actions__secondary">Text link</a>
</div>
</div>
</div>
</div>
</div>Alert message for an informative response to an action
<div class="o-message o-message--alert o-message--neutral" data-o-component="o-message">
<div class="o-message__container">
<div class="o-message__content ">
<p class="o-message__content-main">
There's a fox, and some lazy dogs. Many lazy dogs. Many, many, many lazy dogs. Only one fox. Many, many, many lazy dogs.
</p>
<div class="o-message__actions">
<a href="#" class="o-message__actions__primary">Button</a>
<a href="#" class="o-message__actions__secondary">Text link</a>
</div>
</div>
</div>
</div>Alert message for an informative response to an action, styled to fit within another container
<div class="demo-inner-message">
<div class="o-message o-message--alert o-message--inner o-message--neutral" data-o-component="o-message">
<div class="o-message__container">
<div class="o-message__content ">
<p class="o-message__content-main">
<span class="o-message__content-highlight">
Meh.
</span>
<span class="o-message__content-detail">The quick brown fox did not jump over the lazy dogs.</span>
</p>
<div class="o-message__actions">
<a href="#" class="o-message__actions__primary">Button</a>
<a href="#" class="o-message__actions__secondary">Text link</a>
</div>
</div>
</div>
</div>
</div>Alert message for a negative response to an action
<div class="o-message o-message--alert o-message--error" data-o-component="o-message">
<div class="o-message__container">
<div class="o-message__content ">
<p class="o-message__content-main">
The quick brown fox did <span class="o-message__content-highlight">not</span> jump over the lazy dogs.
</p>
<div class="o-message__actions">
<a href="#" class="o-message__actions__primary">Button</a>
<a href="#" class="o-message__actions__secondary">Text link</a>
</div>
</div>
</div>
</div>Alert message for a negative response to an action, styled to fit within another container
<div class="demo-inner-message">
<div class="o-message o-message--alert o-message--inner o-message--error" data-o-component="o-message">
<div class="o-message__container">
<div class="o-message__content ">
<p class="o-message__content-main">
<span class="o-message__content-highlight">
Oops.
</span>
The quick brown fox did <span class="o-message__content-highlight">not</span> jump over the lazy dogs.
</p>
<p class="o-message__content-additional">But that sentence still uses all of the letters in the alphabet at least once!</p>
<div class="o-message__actions">
<a href="#" class="o-message__actions__primary">Button</a>
<a href="#" class="o-message__actions__secondary">Text link</a>
</div>
</div>
</div>
</div>
</div>Notice message to convey information
<div class="o-message o-message--notice o-message--inform" data-o-component="o-message">
<div class="o-message__container">
<div class="o-message__content ">
<p class="o-message__content-main">
There are lazy dogs, maybe in a field, maybe not. It's important that you are informed of this fact.
</p>
<div class="o-message__actions">
<a href="#" class="o-message__actions__primary">Button</a>
<a href="#" class="o-message__actions__secondary">Text link</a>
</div>
</div>
</div>
</div>Notice message to convey information, styled to fit within another container
<div class="demo-inner-message">
<div class="o-message o-message--notice o-message--inner o-message--inform" data-o-component="o-message" data-close="false">
<div class="o-message__container">
<div class="o-message__content ">
<p class="o-message__content-main">
There are lazy dogs, maybe in a field, maybe not. It's important that you are informed of this fact.
</p>
<div class="o-message__actions">
<a href="#" class="o-message__actions__primary">Button</a>
<a href="#" class="o-message__actions__secondary">Text link</a>
</div>
</div>
</div>
</div>
</div>Sass users may customise alert messages. See the README for more information.
Sass users may customise notice messages. See the README for more information.