Messages
The messages component is mostly a duplicate of the Classy theme styled system messages. There are slight modifiers added to give more flexibility.
.messages--status
Status system message.
.messages--error
Error system message.
.messages--warning
Warning system message.
.messages--plain
Removes the background image if there is one. In this example the messages--warning modifier is used as well.
{{ attach_library('h4h_theme/messages') }}
{# For KSS fake the error message. #}
{% if kss == true and modifier_class == 'messages--error' %}
{% set type = 'error' %}
{% set status_headings_type = 'Error Message' %}
{% endif %}
{#
Add a modifer class in addition to the messages--plain
class to showcase the removed icon.
#}
{% if kss == true and modifier_class == 'messages--plain' %}
{% set modifier_class = modifier_class ~ ' messages--error' %}
{% endif %}
<div role="contentinfo" aria-label="{{ status_headings_type }}" class="messages {{ modifier_class }}">
{% if type == 'error' %}
<div role="alert">
{% endif %}
{% if status_headings_type %}
<h2 class="visually-hidden">{{ status_headings_type }}</h2>
{% endif %}
{% if messages|length > 1 %}
<ul class="messages__list">
{% for message in messages %}
<li class="messages__item">{{ message|raw }}</li>
{% endfor %}
</ul>
{% else %}
{{ messages|first }}
{% endif %}
{% if type == 'error' %}
</div>
{% endif %}
</div>