UI Library

Messages (levels)

Toggle example guides Toggle HTML markup

Messages with different levels.

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