Style Guide

Buttons

Link Button

Headings

This is H1

This is H2

This is H3

This is H4

This is H5

This is H6

This is a link

Colors

.blue

.blue-light

.blue-translucid

.blue-lighter

.green

.green-translucid

.yellow

.red

.purple

.navy

.taupe

.dark-grayish-blue

.grey

.grey-lighter

.light-grayish-blue

.grey-light

Background colors

.bg-primary or .bg-blue

.bg-success or .bg-green

.bg-warning or .bg-yellow

.bg-info or .bg-blue-light

.bg-danger or .bg-red

.bg-purple

.bg-black

.bg-navy

.bg-taupe

.bg-dark-grayish-blue

.bg-grey

.bg-grey-lighter

.bg-light-grayish-blue

.bg-grey-light

Typography Utilities

Regular

Caps

Left align

Center

Right align

Justify Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.

Underline

Bold

Italic

This is code

http://domain.com/projects.json

Max width 1 Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.

Max width 2 Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison

Max width 3 Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison

Max width 4 Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison

First Item
First Item
First Item

First Item
First Item
First Item

First Item
First Item
First Item

Forms

Email Address We'll never share your email with anyone else.

Password

Select

Example multiple select

File input This is some placeholder block-level help text for the above input. It easily wraps to a new line.

Remember me

Radio buttons

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Option one is this and that—be sure to include why it's great

Option two is disabled

Inline

1 2 3

Disabled

Validation

Tables

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table light

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table striped

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table inverse

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Alerts

success

info

warning

danger

special

dark-grayish-blue

grey-light

Badges

Example heading New

default primary success info warning danger special dark-grayish-blue grey

Borders

.border

.border-top

.border-left

.border-right

.border-bottom

Components

Collaborate instantly with anyone

We make it easy to collaborate with anyone in your team through dedicated tools and other means.

Collaborate instantly with anyone

We make it easy to collaborate with anyone in your team through dedicated tools and other means.

Extendable

Custom text block with different flavours such as light blue, purple, or yellow.