Messaging

These messages are intended to display at the top of a page or section. Each variation's color and icon is declared by the parent classNamename. The standard messaging component contains the following sections: icon, header, details and close button. Close button is optional and close functionality is not included.

dk-message--neutral

dk-message--attention

dk-message--success

dk-message--failure

Simplified Message Options

Not all the child divs are required for the message to display properly. The following are optional: dk-message__header, dk-message__details and dk-message__btn.

<div class="dk-message--neutral"> <!-- This classname designates which color and icon appear on the message -->
    <div class="dk-message__icon"></div>
    <div class="dk-message__content">
        <span class="dk-message__header">
            Message Headline Text
        </span>
        <span class="dk-message__details">
            Message Detail Text
        </span>
    </div>
    <div class="dk-message__btn">
        <button class="icon-close"></button>
    </div>
</div>

Note: It is important to use span elements for the dk-message__header and dk-message__details

Note: A dash is added by the dk-message__header CLASS after the header to simplify the usage of the messaging pattern so removing the dk-message__details will appear to leave a trailing (-). Example:

Basic Message for A/B Testing

A very simplified message style that requires colors and icons to be declared inline. This is intended to be used in A/B testing scenarios and not the standard website. Approved versions from testing will be added to the above version options as needed.

<div className="dk-message--basic">
    <span className="dk-message__icon" style="background-color:var(--market-orange); color:var(--white)">
        &#xd105;
    </span>
    <span className="dk-message__content">
        This message is a basic version. 
    </span>
</div>