Alerts

The alerts are used everywhere on the website to notify users about promotions or issues

Below you will find the different definitions and options to alerts

Overview

Global Definition
Alerts with a badge and state
Alerts without an image
Alerts with extra attention button
Alerts that are visible after refreshing the page
Alerts that are visible again after 30 days or until cookies are cleared

Alerts can have an option to be hidden for 30 days based on user interaction

Themes

Light Theme Left Border

Red Border
Blue Border
Green Border

Dark Theme Left Border

Yellow Border
Green Border

Overview

Global Definition

Alerts can be setup to be visible again after a page refresh, or after 30 days.

Alerts left borders can be changed using modifier classes, the modifiers depend on the theme that is being used for the specific alert.

Alerts with a badge and state

Alerts can be setup with a badge and additional information, to do this add the “msds-alert__alert-badge“ element or the state element “msds-alert__header-state“

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="d-none msds-alert msds-alert--solution msds-bg-gray-2" data-alert-id="111">
                <div class="msds-alert__close-click-area">
                    <svg class="msds-alert__close-icon">
                        <use href="../../msds-spritemap.svg#cross" />
                    </svg>
                </div>
                <div class="msds-alert__content-container">
                    <div class="msds-alert__image msds-innovation"></div>
                    <div class="msds-alert__text-container">
                        <div class="msds-alert__header">
                            AGG Solution
                            <span class="msds-alert__header-state">ready to publish</span>
                        </div>
                        <div class="msds-alert__alert-badge msds-bg-dusty-green msds-text-white">
                            <div class="msds-text-body-3-bold text-nowrap">Solution Service</div>
                        </div>
                        <p class="msds-alert__text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
                            amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
                            Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
                            porttitor pulvinar.
                        </p>
                        <div class="msds-alert__action-container">
                            <button type="button"
                                class="msds-btn msds-btn--secondary msds-btn--sm">ok,
                                i get it</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Alerts without an image

Alerts can be setup without an image/icon by removing the image container”msds-alert__image“

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="d-none msds-alert msds-bg-gray-2" data-alert-id="12">
                <div class="msds-alert__close-click-area">
                    <svg class="msds-alert__close-icon">
                        <use href="../../msds-spritemap.svg#cross" />
                    </svg>
                </div>
                <div class="msds-alert__content-container">
                    <div class="msds-alert__text-container">
                        <div class="msds-alert__header">Donec libero turpis, lacinia nec leo sit amet</div>
                        <p class="msds-alert__text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
                            amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
                            Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
                            porttitor pulvinar.
                        </p>
                        <div class="msds-alert__action-container">
                            <button type="button"
                                class="msds-btn msds-btn--secondary msds-btn--sm">ok,
                                i get it</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Alerts with extra attention

Alerts can have an additional button by adding a second “msds-btn“ with your desired styling eg:”msds-btn--gray“ inside the “msds-alert__action-container“ element.

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="d-none msds-alert msds-bg-gray-2" data-alert-id="12">
                <div class="msds-alert__close-click-area">
                    <svg class="msds-alert__close-icon">
                        <use href="../../msds-spritemap.svg#cross" />
                    </svg>
                </div>
                <div class="msds-alert__content-container">
                    <div class="msds-alert__image msds-clock-24-7"></div>
                    <div class="msds-alert__text-container">
                        <div class="msds-alert__header">Donec libero turpis, lacinia nec leo sit amet</div>
                        <p class="msds-alert__text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
                            amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
                            Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
                            porttitor pulvinar.
                        </p>
                        <div class="msds-alert__action-container">
                            <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm">ok,
                                i get it</button>
                            <button type="button" class="msds-btn msds-btn--gray msds-btn--sm">cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Alerts that are visible after refreshing the page

To use an alert that will be visible after page refresh, use the standard markup for an alert

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="d-none msds-alert msds-bg-gray-2" data-alert-id="12">
                <div class="msds-alert__close-click-area">
                    <svg class="msds-alert__close-icon">
                        <use href="../../msds-spritemap.svg#cross" />
                    </svg>
                </div>
                <div class="msds-alert__content-container">
                    <div class="msds-alert__image msds-clock-24-7"></div>
                    <div class="msds-alert__text-container">
                        <div class="msds-alert__header">Donec libero turpis, lacinia nec leo sit amet</div>
                        <p class="msds-alert__text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
                            amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
                            Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
                            porttitor pulvinar.
                        </p>
                        <div class="msds-alert__action-container">
                            <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm">ok,
                                i get it</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Alerts that are visible again after 30 days

To use an alert that will remain hidden for 30 days, use the standard markup for alerts and add “msds-alert--stay-hidden“ to the main HTML element.

This version of the alerts does use cookies, so please ensure GDPR compliance when using alerts that need to remain hidden.

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="d-none msds-alert msds-alert--stay-hidden msds-bg-gray-2" data-alert-id="123">
                <div class="msds-alert__close-click-area">
                    <svg class="msds-alert__close-icon">
                        <use href="../../msds-spritemap.svg#cross" />
                    </svg>
                </div>
                <div class="msds-alert__content-container">
                    <div class="msds-alert__image msds-milestone-global-offices-illustration"></div>
                    <div class="msds-alert__text-container">
                        <div class="msds-alert__header">Donec libero turpis, lacinia nec leo sit amet</div>
                        <p class="msds-alert__text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
                            amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
                            Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
                            porttitor pulvinar.
                        </p>
                        <div class="msds-alert__action-container">
                            <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm">ok,
                                i get it</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Alerts can have an option to be hidden for 30 days based on user interaction

The alert can setup to have an option, where the user can choose to see the alert again by using a checkbox.

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="d-none msds-alert msds-bg-gray-2" data-alert-id="1234">
                <div class="msds-alert__close-click-area">
                    <svg class="msds-alert__close-icon">
                        <use href="../../msds-spritemap.svg#cross" />
                    </svg>
                </div>
                <div class="msds-alert__content-container">
                    <div class="msds-alert__image msds-xprotect-compare-products"></div>
                    <div class="msds-alert__text-container">
                        <div class="msds-alert__header">Donec libero turpis, lacinia nec leo sit amet</div>
                        <p class="msds-alert__text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
                            amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
                            Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
                            porttitor pulvinar.
                        </p>
                        <div class="msds-alert__action-container">
                            <button type="button" class="msds-btn msds-btn--secondary msds-btn--sm">ok,
                                i get it</button>
                            <div class="msds-alert__checkbox-container">
                                <input type="checkbox" class="msds-alert__checkbox" id="msds-alert__checkbox"
                                    type="text">
                                <label class="msds-alert__checkbox-label" for="msds-alert__checkbox">Don't show this
                                    again</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Themes

The light theme is applied by default to alerts, to utilize the dark themed alert, use “msds-alert--dark-theme“ CSS class

Light Theme Left Border

Light themed alerts have three different options:

Red - Indicates warnings, the red border is used by default
Blue - Indicates generic notifications
Green - Indicates success notifications

Red Border Light

To use a left banner that is red use “msds-alert“

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="d-none msds-alert msds-bg-gray-2" data-alert-id="12">
                <div class="msds-alert__close-click-area">
                    <svg class="msds-alert__close-icon">
                        <use href="../../msds-spritemap.svg#cross" />
                    </svg>
                </div>
                <div class="msds-alert__content-container">
                    <div class="msds-alert__image msds-clock-24-7"></div>
                    <div class="msds-alert__text-container">
                        <div class="msds-alert__header">Donec libero turpis, lacinia nec leo sit amet</div>
                        <p class="msds-alert__text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
                            amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
                            Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
                            porttitor pulvinar.
                        </p>
                        <div class="msds-alert__action-container">
                            <button type="button"
                                class="msds-btn msds-btn--secondary msds-btn--sm">ok,
                                i get it</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Blue Border Light

To use a left banner that is blue use “msds-alert--generic“

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="d-none msds-alert msds-alert--generic msds-bg-gray-2" data-alert-id="123456">
                <div class="msds-alert__close-click-area">
                    <svg class="msds-alert__close-icon">
                        <use href="../../msds-spritemap.svg#cross" />
                    </svg>
                </div>
                <div class="msds-alert__content-container">
                    <div class="msds-alert__image msds-innovation"></div>
                    <div class="msds-alert__text-container">
                        <div class="msds-alert__header">Donec libero turpis, lacinia nec leo sit amet</div>
                        <p class="msds-alert__text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
                            amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
                            Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
                            porttitor pulvinar.
                        </p>
                        <div class="msds-alert__action-container">
                            <button type="button"
                                class="msds-btn msds-btn--secondary msds-btn--sm">ok,
                                i get it</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Green Border Light

To use a left banner that is green use “msds-alert--solution“

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="d-none msds-alert msds-alert--solution msds-bg-gray-2" data-alert-id="111">
                <div class="msds-alert__close-click-area">
                    <svg class="msds-alert__close-icon">
                        <use href="../../msds-spritemap.svg#cross" />
                    </svg>
                </div>
                <div class="msds-alert__content-container">
                    <div class="msds-alert__image msds-innovation"></div>
                    <div class="msds-alert__text-container">
                        <div class="msds-alert__header">
                            AGG Solution
                        </div>
                        <p class="msds-alert__text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
                            amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
                            Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
                            porttitor pulvinar.
                        </p>
                        <div class="msds-alert__action-container">
                            <button type="button"
                                class="msds-btn msds-btn--secondary msds-btn--sm">ok,
                                i get it</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Dark Theme Left Border

To use a Dark Themed alert use “msds-alert--dark-theme“ themed alerts have three different options:

Yellow - Indicates warnings, the yellow border is used by default
Green - Indicates success notifications

Yellow Border Dark

To use a left banner that is blue use “msds-alert--dark-theme“

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="d-none msds-alert msds-alert--dark-theme msds-bg-dark-blue-gradient" data-alert-id="222">
                <div class="msds-alert__close-click-area">
                    <svg class="msds-alert__close-icon">
                        <use href="../../msds-spritemap.svg#cross" />
                    </svg>
                </div>
                <div class="msds-alert__content-container">
                    <div class="msds-alert__image msds-innovation"></div>
                    <div class="msds-alert__text-container">
                        <div class="msds-alert__header">
                            AGG Solution
                        </div>
                        <p class="msds-alert__text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
                            amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
                            Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
                            porttitor pulvinar.
                        </p>
                        <div class="msds-alert__action-container">
                            <button type="button" class="msds-btn msds-btn--secondary-dark msds-btn--sm">ok,
                                i get it</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Green Border Dark

To use a left banner that is green use “msds-alert--dark-theme msds-alert--solution“

The alerts have multiple customization options that will be listed below

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="d-none msds-alert msds-alert--dark-theme msds-alert--solution msds-bg-dark-blue-gradient" data-alert-id="222">
                <div class="msds-alert__close-click-area">
                    <svg class="msds-alert__close-icon">
                        <use href="../../msds-spritemap.svg#cross" />
                    </svg>
                </div>
                <div class="msds-alert__content-container">
                    <div class="msds-alert__image msds-innovation"></div>
                    <div class="msds-alert__text-container">
                        <div class="msds-alert__header">
                            AGG Solution
                        </div>
                        <p class="msds-alert__text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit
                            amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie.
                            Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac
                            porttitor pulvinar.
                        </p>
                        <div class="msds-alert__action-container">
                            <button type="button" class="msds-btn msds-btn--secondary-dark msds-btn--sm">ok,
                                i get it</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Digital Design System