Design Elements: Colors; Icons; Typography; Fonts; Logos

Typography

A typography baseline for header, paragraph and list elements. Utility classes are also provided for alignment, font weight and text transforms.

Headers

%h1 This is a header.
%h2 This is a header.
%h3 This is a header.
%h4 This is a header.
%h5 This is a header.
%h6 This is a header.

h1. This is a header.

h2. This is a header.

h3. This is a header.

h4. This is a header.

h5. This is a header.

h6. This is a header.

Subheaders

%h1.subheader This is a subheader.
%h2.subheader This is a subheader.
%h3.subheader This is a subheader.
%h4.subheader This is a subheader.
%h5.subheader This is a subheader.
%h6.subheader This is a subheader.

h1. This is a subheader.

h2. This is a subheader.

h3. This is a subheader.

h4. This is a subheader.

h5. This is a subheader.

h6. This is a subheader.

Paragraphs

Paragraphs are preset with a font size, line height and spacing to set an overall vertical rhythm.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lists

Unordered List

Item 1
- Item 1A
Item 2
Item 3
Item 4

Ordered List

Item 1
1. Item 1A
Item 2
Item 3
Item 4

Definition List

Item 1: Item 1 definition
Item 2: Item 2 definition

Helper Classes

Text Alignment

You can change the text alignment of an element by adding .text-left, .text-right, .text-center or .text-justify to an element.

Adding a size to the front of a text alignment class will cause it to only be applied on that size screen or larger (ex. .medium-text-center will center text for everything except small screens). Adding a size and only will apply the text alignment just for that media query (ex. .medium-only-text-center will center text just for medium screens).

Align Left	Align Right	Align Center	Justify
`.text-left`	`.text-right`	`.text-center`	`.text-justify`
`.small-text-left`	`.small-text-right`	`.small-text-center`	`.small-text-justify`
`.small-only-text-left`	`.small-only-text-right`	`.small-only-text-center`	`.small-only-text-justify`
`.medium-text-left`	`.medium-text-right`	`.medium-text-center`	`.medium-text-justify`
`.medium-only-text-left`	`.medium-only-text-right`	`.medium-only-text-center`	`.medium-only-text-justify`
`.large-text-left`	`.large-text-right`	`.large-text-center`	`.large-text-justify`
`.large-only-text-left`	`.large-only-text-right`	`.large-only-text-center`	`.large-only-text-justify`
`.xlarge-text-left`	`.xlarge-text-right`	`.xlarge-text-center`	`.xlarge-text-justify`
`.xlarge-only-text-left`	`.xlarge-only-text-right`	`.xlarge-only-text-center`	`.xlarge-only-text-justify`
`.xxlarge-text-left`	`.xxlarge-text-right`	`.xxlarge-text-center`	`.xxlarge-text-justify`

Text Formatting

// Reduces font size by 80%
.text-smaller

// Transforms text to uppercase
.text-uppercase

// Capitalizes first letter of the word
.text-captitalize