Alert

Since v1.0.0

View source

Alerts can be use to display feedback messages or any important content.

A simple default alert message

A simple primary alert message

A simple secondary alert message

A simple success alert message

A simple danger alert message

A simple warning alert message

A simple info alert message

A simple dark alert message

A simple white alert message

<div class="c-alert" role="alert">A simple default alert message</div>
<div class="c-alert c-alert--primary" role="alert">A simple primary alert message</div>
<div class="c-alert c-alert--secondary" role="alert">A simple secondary alert message</div>
<div class="c-alert c-alert--success" role="alert">A simple success alert message</div>
<div class="c-alert c-alert--danger" role="alert">A simple danger alert message</div>
<div class="c-alert c-alert--warning" role="alert">A simple warning alert message</div>
<div class="c-alert c-alert--info" role="alert">A simple info alert message</div>
<div class="c-alert c-alert--dark" role="alert">A simple dark alert message</div>
<div class="c-alert c-alert--white" role="alert">A simple white alert message</div>

note

There is not light variant, because it's considered as the default colors.