Messages
The messages component is mostly a duplicate of the Classy theme styled system messages. There are slight modifiers added to give more flexibility.
We're sorry, but your payment has been declined. Please check your payment information for errors and try your donation again, or call our Partner Service at 1-800-HABITAT (422-4828) for more assistance.
.messages--status
Status system message.
We're sorry, but your payment has been declined. Please check your payment information for errors and try your donation again, or call our Partner Service at 1-800-HABITAT (422-4828) for more assistance.
.messages--error
Error system message.
Error Message
We're sorry, but your payment has been declined. Please check your payment information for errors and try your donation again, or call our Partner Service at 1-800-HABITAT (422-4828) for more assistance..messages--warning
Warning system message.
We're sorry, but your payment has been declined. Please check your payment information for errors and try your donation again, or call our Partner Service at 1-800-HABITAT (422-4828) for more assistance.
.messages--plain
Removes the background image if there is one. In this example the messages--warning modifier is used as well.
We're sorry, but your payment has been declined. Please check your payment information for errors and try your donation again, or call our Partner Service at 1-800-HABITAT (422-4828) for more assistance.
{{ 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>