Features

Buttons

Default Button Outline Button Rounded Button Icon Button
 
Small Button Small Outline Button Small Rounded Button Small Icon Button

<a href="#" class="button">Default Button</a>
<a href="#" class="button outline">Outline Button</a>
<a href="#" class="button rounded">Rounded Button</a>
<a href="#" class="button fa fa-external-link-alt">Icon Button</a>
<a href="#" class="button small">Small Button</a>
<a href="#" class="button small outline">Small Outline Button</a>
<a href="#" class="button small rounded">Small Rounded Button</a>
<a href="#" class="button small fa fa-external-link-alt icon-right">Small Icon Button</a>

Icons

Font Awesome 5 icons https://fontawesome.com/icons (requires Icon Widget plugin).

<i class="fa fa-star fa-sm"></i>
<i class="fa fa-star fa-lg"></i>
<i class="fa fa-star fa-2x"></i>
<i class="fa fa-star fa-3x"></i>
<i class="fa fa-star fa-4x"></i>

Modal

Show Modal

<button onclick="show('modal')">Show Modal</button>

<div class="modal">
    <h3>Modal popup</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque venenatis augue eget lacinia.</p>
    <button onclick="hide('modal')">Close Modal</button>
    <button class="close" onclick="hide('modal')">Close Modal</button>
</div>

Boxes

<div class="box">
    <h6>This is a box title</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque venenatis augue eget lacinia.</p>
</div>

Notice

<div class="notice">Default <button class="close alignright" onclick="hide('notice')"></button></div>
<div class="notice-success">Success <button class="close alignright" onclick="hide('notice-success')"></button></div>
<div class="notice-info">Info <button class="close alignright" onclick="hide('notice-info')"></button></div>
<div class="notice-warning">Warning <button class="close alignright" onclick="hide('notice-warning')"></button></div>
<div class="notice-error">Error <button class="close alignright" onclick="hide('notice-error')"></button></div>

Colors

<div class="palette">
<div class="has-blue-background-color">Blue</div>
<div class="has-indigo-background-color">Indigo</div>
<div class="has-purple-background-color">Purple</div>
<div class="has-pink-background-color">Pink</div>
<div class="has-red-background-color">Red</div>
<div class="has-orange-background-color">Orange</div>
<div class="has-yellow-background-color">Yellow</div>
<div class="has-green-background-color">Green</div>
<div class="has-teal-background-color">Teal</div>
<div class="has-cyan-background-color">Cyan</div>
<div class="has-gray-100-background-color">100</div>
<div class="has-gray-200-background-color">200</div>
<div class="has-gray-300-background-color">300</div>
<div class="has-gray-400-background-color">400</div>
<div class="has-gray-500-background-color">500</div>
<div class="has-gray-600-background-color">600</div>
<div class="has-gray-700-background-color">700</div>
<div class="has-gray-800-background-color">800</div>
<div class="has-gray-900-background-color">900</div>
<div class="has-black-background-color">Black</div>
</div>