SIA Web Design Library

Status messages: Floating

No notes defined.

<div class="c-status-messages c-status-messages--floating">
    <div role="contentinfo" aria-label="Error message" class="c-status-messages__type c-status-messages__type--error c-info-box c-info-box--error c-status-messages__info-box">
        <div role="alert">
            <h2 class="sr-only">Error message</h2>
            <p class='c-status-messages__message'>

            </p>
        </div>
    </div>
    <div role="contentinfo" aria-label="Status message" class="c-status-messages__type c-status-messages__type--status c-info-box c-info-box--status c-status-messages__info-box">
        <h2 class="sr-only">Status message</h2>
        <p class='c-status-messages__message'>
            The changes have been saved
        </p>
    </div>
    <div role="contentinfo" aria-label="Warning message" class="c-status-messages__type c-status-messages__type--warning c-info-box c-info-box--warning c-status-messages__info-box">
        <h2 class="sr-only">Warning message</h2>
        <p class='c-status-messages__message'>
            Your profile still needs updating
        </p>
    </div>
</div>
 
<div class="{{ get_component_class( 'status-messages', display ) }}">
    {% for type, messages in items %}
        <div role="contentinfo" aria-label="{{ labels[type] }}" class="c-status-messages__type c-status-messages__type--{{ type }} {{ get_component_class( 'info-box', { component: 'status-messages', modifiers: [ type ] } ) }}">
            {% if type == 'error' %}
                <div role="alert">
            {% endif %}
            {% if labels[type] %}
                <h2 class="sr-only">{{ labels[type] }}</h2>
            {% endif %}
            {% if messages|length > 1 %}
                <ul class='u-list--unstyled c-status-messages__items'>
                    {% for message in messages %}
                        <li class='c-status-messages__message c-status-messages__message'>{{ message }}</li>
                    {% endfor %}
                </ul>
            {% else %}
                <p class='c-status-messages__message'>
                    {{ messages|first }}
                </p>
            {% endif %}
            {% if type == 'error' %}
                </div>
            {% endif %}
        </div>
    {% endfor %}
</div>
 
{
  "labels": {
    "error": "Error message",
    "status": "Status message",
    "warning": "Warning message"
  },
  "items": {
    "error": null,
    "status": [
      "The changes have been saved"
    ],
    "warning": [
      "Your profile still needs updating"
    ]
  },
  "display": {
    "modifiers": [
      "floating"
    ]
  }
}