A Message explains nearby content. It can serve as a simple explanation cue or hold a button that triggers an action. It takes full width of it's parent.
Some text and a link.
<div class="o-message">
<div class="o-message__body">
<p>
Some text and a <a href="#">link</a>.
</p>
</div>
</div>
Body text
Body text
Body text
Body text
Body text
<div class="o-message o-message--color-{color}">
<div class="o-message__body">
<h6>Heading</h6>
<p>
Body text
</p>
</div>
<div class="o-message__action">
<button type="button" class="o-button o-button--small o-button--color-{color}">
action
</button>
</div>
</div>
Body text
<div class="o-message o-message--color-{color}">
<div class="o-avatar o-avatar--size-small o-avatar--circle">
<svg viewBox="0 0 80 80" width="80px" height="auto" xmlns="http://www.w3.org/2000/svg">
<path d="m28.6091684 41.6452381c3.2812101 2.1225413 7.1921206 3.3547619 11.3908316 3.3547619s8.1096215-1.2322206 11.3908316-3.3547619c16.5421837 4.9053348 28.6091684 20.2208507 28.6091684 38.3547619 0 22.09139-17.90861 40-40 40s-40-17.90861-40-40c0-18.1339112 12.0669847-33.4494271 28.6091684-38.3547619zm11.3908316.3547619c-9.9411255 0-18-8.0588745-18-18s8.0588745-18 18-18 18 8.0588745 18 18-8.0588745 18-18 18z" fill-rule="evenodd"></path>
</svg>
</div>
<div class="o-message__body">
<p>
Body text
</p>
</div>
<div class="o-message__action">
<button type="button" class="o-button o-button--small o-button--color-{color}">
action
</button>
</div>
</div>
Meant to be used outside containers in order to take full browser width.
Body text
<div class="o-message o-message--color-{color} o-message--full">
<div class="o-message__body">
<h6>Heading</h6>
<p>
Body text
</p>
</div>
</div>
Attribute | Description | Possible values | Type | Required | Default |
---|---|---|---|---|---|
color | Set with .o-message--color-{color} class | See Colors page | String | - | - |
size | Set with .o-message--full . Meant to be used outside containers in order to take full browser width. | full | String | - | - |
Made at Fomo