UI Library

Messages

Dismissible messages

Toggle full screen Open in new window 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

Messages (levels)

Toggle full screen Open in new window 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

Non dismissible messages

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Non dismissible Messages.

<insert-markup>messages.nondismissible-</insert-markup>
  • LEVEL This message is NOT dismissible.
.m-messages__item--error
error message
<insert-markup>messages.nondismissible-0</insert-markup>
  • LEVEL This message is NOT dismissible.
.m-messages__item--warning
warning message
<insert-markup>messages.nondismissible-1</insert-markup>
  • LEVEL This message is NOT dismissible.
.m-messages__item--success
success message
<insert-markup>messages.nondismissible-2</insert-markup>
  • LEVEL This message is NOT dismissible.
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 message is NOT dismissible.
        </span>
    </li>
</ul>
Source: static/css/src/_m-messages.scss, line 146