UI Library

Dismissible messages

Toggle example guides Toggle HTML markup

Dismissible Messages.

<insert-markup>messages.dismissible-</insert-markup>
  • LEVEL This message is dismissible.
  • LEVEL This message is dismissible.
  • LEVEL This message is dismissible.
  • LEVEL This message is dismissible.
:hover
mouse over state
<insert-markup>messages.dismissible-0</insert-markup>
  • LEVEL This message is dismissible.
  • LEVEL This message is dismissible.
  • LEVEL This message is dismissible.
  • LEVEL This message is dismissible.
Markup 
<ul class="m-messages">
    <li class="m-messages__item">
        <span class="m-messages__desc">
            <span class="m-messages__level">LEVEL</span>
            This message is dismissible.
        </span>
        <span class="m-messages__icon [modifier class]"></span>
    </li>
</ul>
<ul class="m-messages">
    <li class="m-messages__item m-messages__item--error">
        <span class="m-messages__desc">
            <span class="m-messages__level">LEVEL</span>
            This message is dismissible.
        </span>
        <span class="m-messages__icon [modifier class]"></span>
    </li>
</ul>
<ul class="m-messages">
    <li class="m-messages__item m-messages__item--warning">
        <span class="m-messages__desc">
            <span class="m-messages__level">LEVEL</span>
            This message is dismissible.
        </span>
        <span class="m-messages__icon [modifier class]"></span>
    </li>
</ul>
<ul class="m-messages">
    <li class="m-messages__item m-messages__item--success">
        <span class="m-messages__desc">
            <span class="m-messages__level">LEVEL</span>
            This message is dismissible.
        </span>
        <span class="m-messages__icon [modifier class]"></span>
    </li>
</ul>
Source: static/css/src/_m-messages.scss, line 98