2.15 components.messages Messages
Styling for generated system messages.
Example
Error message
- This is is a long-form message to diplay how long text strings diplay in a system-generated messages.
- This is a shorter message
- Intro Item And another shorter message
- And another shorter message
- And another shorter message
Warning message
- This is is a long-form message to diplay how long text strings diplay in a system-generated messages.
- This is a shorter message
- And another shorter message
- And another shorter message
- And another shorter message
Status message
- This is is a long-form message to diplay how long text strings diplay in a system-generated messages.
- This is a shorter message
- And another shorter message
- And another shorter message
- And another shorter message
Markup: components/messages/messages.twig
<div role="contentinfo" aria-label="Error message" class="messages drupal-messages messages--error">
<div role="alert">
<h2 class="visually-hidden">Error message</h2>
<ul class="messages__list">
<li class="messages__item">{{messages_item1}}</li>
<li class="messages__item">{{messages_item2}}</li>
<li class="messages__item"><em class="placeholder">{{messages_placeholder}}</em> {{messages_item3}}</li>
<li class="messages__item">{{messages_item3}}</li>
<li class="messages__item">{{messages_item3}}</li>
</ul>
</div>
</div>
<div role="contentinfo" aria-label="Error message" class="messages drupal-messages messages--warning">
<div role="alert">
<h2 class="visually-hidden">Warning message</h2>
<ul class="messages__list">
<li class="messages__item">{{messages_item1}}</li>
<li class="messages__item">{{messages_item2}}</li>
<li class="messages__item">{{messages_item3}}</li>
<li class="messages__item">{{messages_item3}}</li>
<li class="messages__item">{{messages_item3}}</li>
</ul>
</div>
</div>
<div role="contentinfo" aria-label="Error message" class="messages drupal-messages messages--status">
<div role="alert">
<h2 class="visually-hidden">Status message</h2>
<ul class="messages__list">
<li class="messages__item">{{messages_item1}}</li>
<li class="messages__item">{{messages_item2}}</li>
<li class="messages__item">{{messages_item3}}</li>
<li class="messages__item">{{messages_item3}}</li>
<li class="messages__item">{{messages_item3}}</li>
</ul>
</div>
</div>
Source:
sass/components/messages/_messages.scss, line 1