Typography

h1 text

h2 text

h3 text

h4 text

h5 text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Colours

blue
#2277e4

green
#00c035

red
#b01500

grey
#222

beige
#f0efdd

yellow
#eeae50

Buttons

btn btn-secondary btn-danger btn-warning btn-default

Checkbox

<label class="switch">
<input type="checkbox">
<span class="slider"></span></label>

<label class="checkbox">One
<input type="checkbox">
<span class="checkmark"></span></label>

Radio Buttons

<input type="radio" id="radio1">
<label for="radio1">Radio 1</label>

Checked Unchecked Disabled

Lists
<ul><li></li></ul>

List Item 1
List Item 2
List Item 3

Sub List Item 1
Sub List Item 2
Sub List Item 3

Code
<code></code>

Tables

Name	Field	Set	Zone	Band	Actions
Test Boundary	Test Field	Test Set	20	H
New Boundary	New Field	New Set	17	T

Form Styles

Tab System

Tab 1
Tab 2
Tab 3
Tab 4

Tab 1

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.

Tab 2

Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum.

Tab 3

Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

Tab 4

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis.

Misc.

Cards

Additional classes include:

.table-striped, .table-hover, .table-bordered, .table-condensed

Warning

Use class .block-content and class .warning on a block element for a warning message.

Danger

Use class .block-content and class .danger on a block element for a danger/error message.

Range Slider

Grid System

.grid-7

.grid-6

.grid-4

.grid-3

.grid-2

grid-custom .span5

grid-custom .span3

grid-custom .span4

grid-custom .span2

grid-custom .span8

grid-custom .span2

Helper Classes

Below you will find a list of helper classes that you can use on any element for any circumstance.

.no-margin

Gives the classed element no margin.

.no-padding

Gives the classed element no padding.

.top-right

Moves the element to the top right of the closes position: relative parent element.

.top-left

Moves the element to the top left of the closes position: relative parent element.

.font-uppercase

Makes all text in the classed element uppercase.

.font-bold

Makes all text in the classed element bold.

.font-italic

Makes all text in the classed element bold.

.align-center

Makes all text in the classed element aligned center.

.align-left

Makes all text in the classed element aligned left.

.align-right

Makes all text in the classed element aligned right.

.hide

Completely hides the classed element

.hide-md

Completely hides the classed element on screen widths below 850px

.hide-sm

Completely hides the classed element on screen widths below 450px

.clearfix

A class element do seperate page elements vertically. Used as an empty div:
<div class="clearfix"></div>

.full-width

Makes classed element the full width of its parent container.

.bg-blue

Gives the classed element a background colour of the main blue.

.bg-green

Gives the classed element a background colour of the main green.

.bg-red

Gives the classed element a background colour of the main red.

Container Style Classes

.card-container

A container class with a border colour of blue to the left.

Make border colour yellow or red by adding the .warning class or the .danger class to the element as well.

.block-container

A light grey container class. No frequently used, but it's usually used for a large group of form inputs.

Add the .clean class to make the background white instead.

Button Style Classes

.btn

The primary button class. Use this class on all buttons.

.btn .btn-secondary makes the button green.
.btn .btn-danger makes the button red.
.btn .btn-warning makes the button yellow.
.btn .btn-default makes the button dark grey.