Style Guide

Components & Shortcodes
Internal Reference
Modules
External Reference

Colors

Table of Contents

Background Colors

bg-transparent
bg-primary
bg-success
bg-warning
bg-danger
bg-critical
bg-blue-darker
bg-blue-dark
bg-blue
bg-purple
bg-gray-darker
bg-gray-dark
bg-gray
bg-gray-light
bg-gray-ligher
<div class="bg-transparent text-body">bg-transparent</div>
<div class="bg-primary">bg-primary</div>
<div class="bg-success">bg-success</div>
<div class="bg-warning">bg-warning</div>
<div class="bg-danger">bg-danger</div>
<div class="bg-critical">bg-critical</div>

<div class="bg-blue-darker">bg-blue-darker</div>
<div class="bg-blue-dark">bg-blue-dark</div>
<div class="bg-blue">bg-blue</div>

<div class="bg-purple">bg-purple</div>

<div class="bg-gray-darker">bg-gray-darker</div>
<div class="bg-gray-dark">bg-gray-dark</div>
<div class="bg-gray">bg-gray</div>
<div class="bg-gray-light">bg-gray-light</div>
<div class="bg-gray-lighter text-color">bg-gray-ligher</div>

Text Colors

text-color
text-muted
text-primary
text-success
text-warning
text-danger
<div class="text-color">text-color</div>
<div class="text-muted">text-muted</div>
<div class="text-primary">text-primary</div>
<div class="text-success">text-success</div>
<div class="text-warning">text-warning</div>
<div class="text-danger">text-danger</div>

Alerts

alert-info
alert-warning
alert-danger
alert-success
<div class="alert alert-info">alert-info</div>
<div class="alert alert-warning">alert-warning</div>
<div class="alert alert-danger">alert-danger</div>
<div class="alert alert-success">alert-success</div>