Atomia Pattern Library

Messages

.Message

Messages should be used when communicating extra important feedback to the user.

N.B. The Message component makes little sense when used without a modifier class, as can be seen in the example below.

Example

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper auctor tellus a condimentum. Sed ultrices vulputate libero, faucibus tristique nibh tempor eget. Suspendisse hendrerit pulvinar nunc, eget tincidunt urna iaculis pulvinar.

Markup

<div class="Message ">
    This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper auctor tellus a condimentum. Sed ultrices vulputate libero, faucibus tristique nibh tempor eget. Suspendisse hendrerit pulvinar nunc, eget tincidunt urna iaculis pulvinar.
</div>

Standard variations

These are the main variations and states of the Message component.

Modifiers

Message--info

Use this when you need to inform the user of something.

Message--success

Use this to highlight that something went as expected.

Message--warning

Use this to warn the user to take caution - perhaps the changes aren't saved?

Message--error

Use this in case of error/permission denied.

Message--loading

Use this while waiting for something, like a page load or an ajax call.

Markup

<div class="Message [modifier class]">
    This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper auctor tellus a condimentum. Sed ultrices vulputate libero, faucibus tristique nibh tempor eget. Suspendisse hendrerit pulvinar nunc, eget tincidunt urna iaculis pulvinar.
</div>

Small messages

The Message--small modifier should be used when a smaller message is required, e.g. together with a Formrow to provide info on what to put in the field.

Example

Name

Type your name

Password

Password requirements

Password should be at least 8 characters long

Use at least one numeric character

Use at least one special character

Use at least one capital letter

Markup

<div class="Formrow Formrow--noLabel">
    <label class="Formrow-label" for="name">Name</label>
    <div class="Formrow-offset">
        <input id="name" type="text" placeholder="Name" value="your name"/>
        <span class="Message Message--info Message--small">Type your name</span>
    </div>
</div>

<div class="Formrow Formrow--noLabel">
    <label class="Formrow-label" for="password">Password</label>
    <div class="Formrow-offset">
        <input id="password" type="password" placeholder="Password" value="Password"/>
        <div class="Message Message--info break Message--small">
            <h4>Password requirements</h4>
            <p id="pass_req_01" class="PasswordTip is-passed">Password should be at least 8 characters long</p>
            <p id="pass_req_02" class="PasswordTip">Use at least one numeric character</p>
            <p id="pass_req_03" class="PasswordTip">Use at least one special character</p>
            <p id="pass_req_04" class="PasswordTip">Use at least one capital letter</p>
        </div>
    </div>
</div>

Block messages

The Message--block modifier is used when the message is longer, perhaps with multiple paragraphs and a heading.

Example

Complex messages

Donec consectetur, lectus id feugiat finibus, ipsum augue vestibulum dolor, porta tempor mi dui ac libero.

Donec suscipit porta facilisis. Curabitur libero est, ultrices nec mollis sed, consequat et ligula. Sed eget auctor orci, nec porttitor ipsum. Proin ut mi ac turpis blandit feugiat ac nec eros. Cras eget velit non turpis imperdiet vulputate scelerisque nec enim. Quisque condimentum ultricies magna vitae finibus. Suspendisse nisl erat, ultrices eu dolor vitae, convallis tempus mi.

Markup

<div class="Message Message--info Message--block">
    <h2>Complex messages</h2>
    <p>Donec consectetur, lectus id feugiat finibus, ipsum augue vestibulum dolor, porta tempor mi dui ac libero.</p>
    <p>Donec suscipit porta facilisis. Curabitur libero est, ultrices nec mollis sed, consequat et ligula. Sed eget auctor orci, nec porttitor ipsum. Proin ut mi ac turpis blandit feugiat ac nec eros. Cras eget velit non turpis imperdiet vulputate scelerisque nec enim. Quisque condimentum ultricies magna vitae finibus. Suspendisse nisl erat, ultrices eu dolor vitae, convallis tempus mi.</p>
</div>

See though messages

The See-through can be used to remove the background color

Modifiers

Message--info.Message--seethrough

Removes light blue background but keeps blue color scheme

Markup

<div class="Message [modifier class]">
    This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper auctor tellus a condimentum. Sed ultrices vulputate libero, faucibus tristique nibh tempor eget. Suspendisse hendrerit pulvinar nunc, eget tincidunt urna iaculis pulvinar.
</div>

Notification messages

The Message--notify modifier is used when the message is supposed to act as a notification.

Example

Markup

<button type="button" data-bind="click: notify1.showNotification" class="Btn Btn--primary">Show Notification</button>

<div class="Message Message--notify Message--info" style="display:none;" data-bind="notification: 'info', defaultNotification: true">
    <section class="Message-inner">
        <a id="notification-info-close" class="Message-close" href="javascript:void(0);" title="Close">Close</a>

        <div>
            <h2 id="notification-info-title"></h2>
            <p id="notification-info-message"></p>
        </div>
    </section>
</div>

Base

Layout

Components

Tools

Messages

.Message

Example

Markup

Standard variations

Modifiers

Markup

Small messages

Example

Password requirements

Markup

Block messages

Example

Complex messages

Markup

See though messages

Modifiers

Markup

Notification messages

Example

Markup