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 class="dk-message--simple dk-message--simple-success">
    Simple one tag version of the message component for success statements.
</div>
<br />
<div class="dk-message--simple dk-message--simple-neutral dk-bold">
    Simple one tag version of the message component for neutral statements.
</div>
<br />
<div class="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 class="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 class="dk-message--simple dk-message--simple-success dk-message--simple-custom-icon" message-icon="&#xe9d8;">
    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. 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. Messages can be themed using the standard color options from above success, neutral, attention, failure or can be declared specific for your project either inline or with page level css.

Note: If multiple versions of custom themed messaging is required use a unique data-message-theme value for each variation in your css file.

<!-- Example using theme name -->
<div class="dk-message--basic" data-message-theme="neutral" >
    <div class="dk-message__icon">&#xf2be;</div>
    <div class="dk-message__content">
        <span class="dk-message__details">
            This message is a basic version with neutral blue theme
        </span>
    </div>
</div>

<!-- Example using inline styles -->
<div className="dk-message--basic" data-message-theme="custom" style="background-color:#e4d1e4; border-color:#be95be; color:#975d97">
    <div className="dk-message__icon" style="color:#714571">&#xf06b;</div>
    <div className="dk-message__content">
        <span class="dk-message__header">Bold 'message header' text</span>
        <span class="dk-message__details">
            This message is a basic version with custom color theme
        </span>
    </div>
</div>

/* Example of CSS to use in page level stylesheets. If needed add .dkdk color variations for dark mode. */
.dk-message--basic[data-message-theme="custom"] {
    background-color:#e4d1e4;
    border-color:#be95be;
    color:#975d97
}
.dk-message--basic[data-message-theme="custom"] .dk-message__icon {
    color:#714571
}