# Typography

## Headings

Headers and Page Titles Secondary text
Table Titles Secondary text
Form Titles Secondary text

# h1. Bootstrap heading Secondary text

## h2. Bootstrap heading Secondary text

### h3. Bootstrap heading Secondary text

#### h4. Bootstrap heading Secondary text

##### h5. Bootstrap heading Secondary text

###### h6. Bootstrap heading Secondary text

## Body copy

### Body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

### Support text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

### Hint text

Search...Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

### Disabled text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

## Inline text elements

You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
rendered as bold text
rendered as italicized text

## Alignment classes

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

## Transformation classes

Lowercased text.

Uppercased text.

Capitalized text.

## Abbreviations

attr
HTML

## Addresses

## Blockquotes

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

## Lists

### Unordered

- Lorem ipsum dolor sit ame
- Consectetur adipiscing elit

- Phasellus iaculis neque
- Vestibulum laoreet porttitor sem

- Aenean sit amet erat nunc
- Eget porttitor lorem

### Ordered

1. Lorem ipsum dolor sit ame
2. Consectetur adipiscing elit
3. Aenean sit amet erat nunc
4. Eget porttitor lorem

### Unstyled

- Lorem ipsum dolor sit ame
- Consectetur adipiscing elit
- Aenean sit amet erat nunc
- Eget porttitor lorem

### Inline

- Lorem ipsum dolor sit ame
- Consectetur adipiscing elit
- Aenean sit amet erat nunc
- Eget porttitor lorem

### Description

Description lists
  A description list is perfect for defining terms.
Euismod
  Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
  Donec id elit non mi porta gravida at eget metus.
Malesuada porta
  Etiam porta sem malesuada magna mollis euismod.

### Horizontal description

Description lists
  A description list is perfect for defining terms.
Euismod
  Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
  Donec id elit non mi porta gravida at eget metus.
Malesuada porta
  Etiam porta sem malesuada magna mollis euismod.

# Code

## Inline

For example, `<section>` should be wrapped as inline.

## User Input

To switch directories, type `cd` followed by the name of the directory.

## Basic Block

    <p>Sample text here...</p>

## Variables

y = m x + b

## Sample output

`This text is meant to be treated as sample output from a computer program.`

# Tables

## Basic Example

Grid Name
Username | Name | Description | Number
--- | --- | --- | ---
@mdoiw | Mark | Cum sociis natoque penatibus et magnis dis parturient montes | 25,813,874
@fat | Jacob | Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. | 873
@twitter | Larry | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. | 9,702
@apple | Penelope | Donec ullamcorper nulla non metus auctor fringilla. Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. | 19,056
@jsvlsiusoiemn | Issan | VConsectetur adipiscing elit | 739,276

## Striped rows

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

## Bordered table

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

## Hover rows

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

## Condensed table

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

## Contextual classes

# | Column heading | Column heading | Column heading
--- | --- | --- | ---
1 | Column content | Column content | Column content
2 | Column content | Column content | Column content
3 | Column content | Column content | Column content
4 | Column content | Column content | Column content
5 | Column content | Column content | Column content
6 | Column content | Column content | Column content
7 | Column content | Column content | Column content
8 | Column content | Column content | Column content
9 | Column content | Column content | Column content

## Responsive tables

# | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading
--- | --- | --- | --- | --- | --- | ---
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell
2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell
3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell

# | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading
--- | --- | --- | --- | --- | --- | ---
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell
2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell
3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell

# Forms

## Basic example

Email address
Password
File input

Example block-level help text here. Character allowed: 84

Check me out

## Inline form

Email address
@
Password
Remember me

## Horizontal form

Email
Password
Remember me

## Supported controls

### Inputs

### Textarea

### Checkboxes and radios

#### Default (stacked)

Option one is this and that—be sure to include why it's great
Option two is disabled
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

#### Inline checkboxes and radios

1 2 3
1 2 3

### Selects

## Static control

Email

email@example.com

Password

## Input focus (Focus state)

## Disabled inputs

### Disabled fieldsets

Disabled input
Disabled select menu
Can't check this

## Readonly inputs

## Validation states

Input with success
Input with warning
Input with error
With incomplete required field
Required Field

### With optional icons

Input with error

#### Optional icons in horizontal and inline forms

Input with success
Input with warning
Input with error
Input with success
Input with warning
Input with error

#### Optional icons with hidden .sr-only labels

Hidden label

#### With tooltip validation triggered

Input with error

## Control sizing

### Height sizing

### Horizontal form group sizes

Large label
Small label

### Column sizing

## Help text

A block of help text that breaks onto a new line and may extend beyond one line.

# Buttons

## Options

## Sizes

## Active state

### Button element

### Anchor element

Primary link Default link

## Disabled state

### Button element

### Anchor element

Primary link Default link

## Button tags

Link

## Like/Dislike

## Arrows

## Toggle

Available Not Available
On Off

# Helper Classes

## Contextual colors

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

## Contextual backgrounds

This is an awesome default notification. Something cool. View this
kzhang@exacttarget.com

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Warning Message: Donec ullamcorper nulla non metus auctor fringilla. View now

3 contacts were entered incorrectly. Update now
kzhang@exacttarget.com kzhang@exacttarget.com kzhang@exacttarget.com

## Breadcrumbs

## Close icon

## Help icon

## Carets