Sample Typography

Page Heading H1

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Page Heading H2

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Page Heading H3

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Section Heading H4

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Section Sub-Heading H5

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Small Heading H6

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

h1: Page Heading (XL)

h2: Page Heading (L)

h3: Page Heading

h4: Section Heading

h5: Section Sub-Heading
h6: Table Heading

Paragraph Text (L)

Paragraph Text

Paragraph Text (S)

h1: Page Heading (XL)

h2: Page Heading (L)

h3: Page Heading

h4: Section Heading

h5: Section Sub-Heading
h6: Table Heading

Paragraph Text (L)

Paragraph Text

Paragraph Text (S)

h1: Page Heading (XL)

h2: Page Heading (L)

h3: Page Heading

h4: Section Heading

h5: Section Sub-Heading
h6: Table Heading

h1: Page Heading (Settings Pages)

Left aligned text: Add "*--left" to the class.

Center aligned text: Add "*--left" to the class.

Right aligned text: Add "*--left" to the class.

Inputs

Standard Text Inputs

Default (with Placeholder Text)
Default (with Error)
Default (Disabled)

Text Input with Trailer Input

Append Input with Prefix/Suffix Elements

http://
@company.com
$ .00

Append Input with Button

Controls

Toggle Switches

Standard Toggle

This is a toggle switch

Toggle in Container

Toggle Description

Toggle in Container (with Description)

Toggle Description

This is some additional text.

Checkboxes

Standard Checkbox
Grouped Checkboxes (Linear)
Grouped Checkboxes (Stacked)

Radio Buttons

Radio Buttons (Linear)
Radio Buttons (Stacked)

Navigation

Tabs

Default
Tabs (in Container)

This is some sample content.

Tabs (in Container + Button Bar)

This is some sample content.

Grid System

Standard Grid (Fixed Gutter Width: 24px)

Default (Spans 100% Width)

one

eleven

two

ten

three

nine

four

eight

five

seven

six

six

twelve

In Container Class (Fixed Widths)

Note that when wrapping the grid in a .container class, padding equivalent to half the gutter width will be added to the left/rigth of the container. The container group here is shown with a dotted line for clarity.

one

eleven

two

ten

three

nine

four

eight

five

seven

six

six

twelve

Tight Grid (No Gutters: 0px)

Default (Spans 100% Width)

By adding the .gutter-0 class to a grid wrapper, gutters will be removed for all nested col-groups.

one

eleven

two

ten

three

nine

four

eight

five

seven

six

six

twelve

In Container (Fixed Widths)

By adding the .gutter-0 class to the Grid Container, gutters will be removed for all nested col-groups.

one

eleven

two

ten

three

nine

four

eight

five

seven

six

six

twelve

On Individual Rows

By adding the .gutter-0 class to a single col-group, gutters can be removed from individual col-groups as needed.

one

eleven

two

ten

three

nine

four

eight

five

seven

six

six

twelve