<div class="messages__wrap " role="alert" aria-live="polite" data-aos="fade-down" data-aos-anchor=".header" data-aos-anchor-placement="bottom-top">
    <div class="messages messages--hidden-icons">
        <div class="message ">
            This is simple info message. Have a nice day! If you believe it is the right one you can ignore this notice.
        </div>

        <div class="message message--success">
            You have added this fantastic product to the shopping cart.
        </div>

        <div class="message message--error">
            Please specify product&#x27;s required option(s).
        </div>

    </div>
</div>
<div
    class="messages__wrap {{ wrapperClass }}"
    role="alert"
    aria-live="polite"
    data-aos="fade-down"
    data-aos-anchor=".header"
    data-aos-anchor-placement="bottom-top"
>
    <div class="messages {{ class }}">
        {{ render '@message' }}
        {{ render '@message--success' }}
        {{ render '@message--error' }}
    </div>
</div>
{
  "class": "messages--hidden-icons"
}
  • Content:
    $messages__z-index         : $z-index-high + 1 !default;
    $messages__background-color: $white !default;
    $messages__width           : 100% !default;
    
    .messages {
        &--hidden-icons {
            .message {
                &:after {
                    display: none;
                }
            }
        }
    
        &__wrap {
            display: block;
            position: relative;
            width: $messages__width;
            top: 0;
            background-color: $messages__background-color;
    
            html:not(.no-js) &[data-aos^='fade'][data-aos^='fade'] {
                pointer-events: all;
                opacity: 1;
                transform: none;
            }
    
            &.aos-animate {
                position: fixed;
                left: 0;
                z-index: $messages__z-index;
            }
        }
    }
    
  • URL: /components/raw/messages/_messages.scss
  • Filesystem Path: build/components/Organisms/messages/_messages.scss
  • Size: 751 Bytes

Messages Component

It’s composed of message components. It’s a container for messages loaded dynamically (Magento default feature). It has by default HTML attributes: role="alert" aria-live="polite" to be read properly by assistive technologies (#a11y);