# 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)

Input Label Input Label (Alternate)

# 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.

# Buttons

### Standard (& Disabled)

##### Regular

Primary Secondary Tertiary
Primary Secondary Tertiary

##### With Icons (Left)

Primary Secondary Tertiary Tertiary
Primary Secondary Tertiary

### Condensed (& Disabled)

##### Regular

Primary Secondary Tertiary
Primary Secondary Tertiary

##### With Icons (Left)

Primary Secondary Tertiary
Primary Secondary Tertiary

# Inputs

### Standard Text Inputs

##### Default (with Placeholder Text)

Label (Standard) Label (Alternate)

##### Default (with Error)

Label (Standard) Label (Alternate)

##### Default (Disabled)

Label (Standard) Label (Alternate)

### Text Input with Trailer Input

Label (Alternate)
Main Input Trailer (S)
Main Input Trailer (M)
Main Input Trailer (L)
Street Type Direction

### Append Input with Prefix/Suffix Elements

Input with Prefix
http://
Input with Suffix
@company.com
Input with Prefix & Suffix
$ .00

### Append Input with Button

File Path
Browse

# 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

Single Checkbox Single Checkbox (disabled)

##### Grouped Checkboxes (Linear)

- Checkbox A
- Checkbox B
- Checkbox C

##### Grouped Checkboxes (Stacked)

- Label for Checkbox 1
- Label for Checkbox 2
- Label for Checkbox 3

### Radio Buttons

##### Radio Buttons (Linear)

- Radio A
- Radio B
- Radio C

##### Radio Buttons (Stacked)

- Label for Radio 1
- Label for Radio 2
- Label for Radio 3
- Label for Radio 4 (disabled)

# Navigation

### Tabs

##### Default

First Tab Second Tab (Selected) Third Tab

##### Tabs (in Container)

First Tab Second Tab (Selected) Third Tab

This is some sample content.

##### Tabs (in Container + Button Bar)

First Tab Second Tab (Selected) Third Tab

This is some sample content.

Save All

# 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