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.

NEW Simple Message Format

Simple messages can be displayed using a <div> tag with the classname dk-message--simple. The following classname options are available to add the standard message option styles:

• dk-message--simple-success
• dk-message--simple-neutral
• dk-message--simple-failure
• dk-message--simple-attention

Additionally the classname dk-message--simple-with-close will add the close icon to the right side and dk-message--simple-custom-icon will allow for a custom icon to replace the standard one when added using a message-icon attribute containing a html entity of the icon for example .

<div className="dk-message--simple dk-message--simple-success">
    Simple one tag version of the message component for success statements.
</div>
<br />
<div className="dk-message--simple dk-message--simple-neutral dk-bold">
    Simple one tag version of the message component for neutral statements.
</div>
<br />
<div className="dk-message--simple dk-message--simple-failure dk-message--simple-with-close">
    Simple one tag version of the message component for failure statements.
</div>
<br />
<div className="dk-message--simple dk-message--simple-attention dk-message--simple-with-close">
    <div>Simple one tag version of the message component for attention statements. These can have multiple lines of text and include simple html elements like spans and links for example here's a <a href='#'>link</a> and here's a <b>bold</b> tag. To use these you need to wrap the message content with another div tag.</div>
</div>
<br />
<div className="dk-message--simple dk-message--simple-success dk-message--simple-custom-icon" message-icon="&#xf0b2;">
    Simple one tag version of the message component for success statements with a custom icon added with the message-icon tag using a full html entity icon code.
</div>

Standard Message Format

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

Basic Message for A/B Testing, Custom Colors and Icons

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>