Code Club Style Guide

Info Panels

Info Panels

When your page requires an additional, highlited piece of information for the user that isn't necessarily the result of an action they have performed, use an info panel. If you are providing feedback from the server based on an action the user just took, use an alert instead.

Example
This is an information panel. Use these to notify the user of things with text and an icon. They're useful.
This is an information panel. Use these to notify the user of things with text and an icon. They're useful.
This is an information panel. Use these to notify the user of things with text and an icon. They're useful.
This is an information panel. Use these to notify the user of things with text and an icon. They're useful.
<div class="c-info">
<span class="c-icon c-icon--small c-icon--info-fill c-icon--blue"></span>
This is an information panel. Use these to notify the user of things with text and an icon. They're useful.
</div>
<div class="c-info c-info--success">
<span class="c-icon c-icon--small c-icon--info c-icon--green"></span>
This is an information panel. Use these to notify the user of things with text and an icon. They're useful.
</div>
<div class="c-info c-info--warning">
<span class="c-icon c-icon--small c-icon--warning"></span>
This is an information panel. Use these to notify the user of things with text and an icon. They're useful.
</div>
<div class="c-info c-info--error">
<span class="c-icon c-icon--small c-icon--error c-icon--red"></span>
This is an information panel. Use these to notify the user of things with text and an icon. They're useful.
</div>