Patterns

A responsive system to support designers, developers and teams to begin the build of products, apps and services based on a core collection of flexible consistent elements.

 

2 Alerts

Alerts are handy elements you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They'll conform to 100% of the container width you put them in.

2.1 Options

You can add more classes to your alert box to change its appearance - .alert--info, .alert--success, .alert--warning , or .alert--danger

This is an message with a link
This is a smaller message with a link
.alert--info

Used as an alternative to the default styles.

This is an message with a link
This is a smaller message with a link
.alert--success

Indicates a successful or positive action.

This is an message with a link
This is a smaller message with a link
.alert--warning

Indicates caution should be taken with this action.

This is an message with a link
This is a smaller message with a link
.alert--danger

Indicates a dangerous or potentially negative action.

This is an message with a link
This is a smaller message with a link
<div class="alert {$modifiers}">This is an message with a <a href="#">link</a></div>
<div class="alert alert--small {$modifiers}">This is a smaller message with a <a href="#">link</a></div>