Code Club Style Guide

Alerts

Block Alerts

These sit directly below the primary navigation and are used to notify the user of page-load event, such as a form success or error. They cannot be used with hero blocks.

Alerts carry four different types of message: Success, information, warning or error. These four states each feature a different colour and a different icon.

Example
This is an information alert.
This is a success alert.
This is a warning message.
This is an error. Please enter the correct information so we can continue.
<div class="c-alert">
<span class="c-icon c-icon--small c-icon--info-fill c-icon--white"></span>
This is an information alert.
</div>
<div class="c-alert c-alert--success">
<span class="c-icon c-icon--small c-icon--tick-circle c-icon--white"></span>
This is a success alert.
</div>
<div class="c-alert c-alert--warning">
<span class="c-icon c-icon--small c-icon--warning"></span>
This is a warning message.
</div>
<div class="c-alert c-alert--error">
<span class="c-icon c-icon--small c-icon--error c-icon--white"></span>
This is an error. Please enter the correct information so we can continue.
</div>

Inline Alerts

Inline alerts can be used within the content areas, such as in forms. They can be used to highlight a certain requirement or action before the user commits.

Example
This is an information alert.
This is a success alert.
This is a warning message.
This is an error. Please enter the correct information so we can continue.
<div class="c-alert c-alert--inline">
<span class="c-icon c-icon--small c-icon--info-fill c-icon--white"></span>
This is an information alert.
</div>
<div class="c-alert c-alert--inline c-alert--success">
<span class="c-icon c-icon--small c-icon--tick-circle c-icon--white"></span>
This is a success alert.
</div>
<div class="c-alert c-alert--inline c-alert--warning">
<span class="c-icon c-icon--small c-icon--warning"></span>
This is a warning message.
</div>
<div class="c-alert c-alert--inline c-alert--error">
<span class="c-icon c-icon--small c-icon--error c-icon--white"></span>
This is an error. Please enter the correct information so we can continue.
</div>