#### Content - Typography

Statistics Invoices Schedule

###### Heading styles

Default heading sizes and font weights

###### Thin headings

# H1 Heading Thin 25px

## H2 Heading Thin 23px

### H3 Heading Thin 21px

#### H4 Heading Thin 19px

##### H5 Heading Thin 17px

###### H6 Heading Thin 15px

###### Semibold headings

# H1 Heading Semibold 25px

## H2 Heading Semibold 23px

### H3 Heading Semibold 21px

#### H4 Heading Semibold 19px

##### H5 Heading Semibold 17px

###### H6 Heading Semibold 15px

###### Light headings

# H1 Heading Light 25px

## H2 Heading Light 23px

### H3 Heading Light 21px

#### H4 Heading Light 19px

##### H5 Heading Light 17px

###### H6 Heading Light 15px

###### Semibold headings

# H1 Heading Bold 25px

## H2 Heading Bold 23px

### H3 Heading Bold 21px

#### H4 Heading Bold 19px

##### H5 Heading Bold 17px

###### H6 Heading Bold 15px

###### Regular headings

# H1 Heading Regular 25px

## H2 Heading Regular 23px

### H3 Heading Regular 21px

#### H4 Heading Regular 19px

##### H5 Heading Regular 17px

###### H6 Heading Regular 15px

###### Black headings

# H1 Heading Black 25px

## H2 Heading Black 23px

### H3 Heading Black 21px

#### H4 Heading Black 19px

##### H5 Heading Black 17px

###### H6 Heading Black 15px

###### Heading elements

Optional icons, labels and badges

###### Left heading icon

###### Left icon Left positioned heading icon

###### Right inline icon

###### Right inline icon Right inline icon position

###### Right floating icon

###### Right floating icon Right floating icon

###### Left heading label

###### New Left badge Left positioned heading label

###### Right inline badge

###### Right badge Bug Right inline heading badge

###### Right floating badge

###### Right floating badge Fixed Right floating heading badge

###### Left heading pill badge

###### 48 Left pill badge Left positioned heading badge

###### Right inline pill badge

###### Right pill badge 93 Right inline heading pill badge

###### Right floating pill badge

###### Right floating pill badge 37 Right floating heading pill badge

###### List options

Basic list examples with optional classes

###### Default unordered list

Default unordered list using `.list` class

- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc

###### Unstyled list

Unstyled list using `.list-unstyled` class

- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc

###### Square list type

Square list style using `.list-square` class

- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc

###### Default ordered list

Default ordered list using `.list` class

1. Lorem ipsum dolor sit amet
2. Nulla volutpat aliquam velit
   1. Phasellus iaculis neque
   2. Purus sodales ultricies
3. Faucibus porta lacus fringilla vel
4. Aenean sit amet erat nunc

###### Circle list type

Circle list style using `.list-circle` class

- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc

###### List with icons

List with icons using `.list-unstyled` class

- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc

###### List vertical sizing

List item vertical sizing options

###### Default list size

Default list doesn't have item spacing

- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc

###### Custom list spacing

Add some spacing using `.list` class

- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc

###### Extended list

Extended list using `.list-extended` class

- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc

###### Inline lists

Inline list style options

###### Default inline list

Inline list using `.list-inline` class

- 1. First item
- 2. Second item
- 3. Third item

###### Condensed inline list

Using `.list-inline-condensed` class

- 1. First item
- 2. Second item
- 3. Third item

###### Separated inline list

Using `.list-inline-separate` class

- First item
- Second item
- Third item

###### Description lists

Vertical and horizontal description lists

###### Vertical description list

Vertical list of terms with their associated descriptions.

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 list

Horizontal list of terms with their associated descriptions.

Description lists
  A description list is perfect for defining terms.
Euismod
  Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Malesuada porta
  Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
  Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
  Nested definition list
    Aenean posuere tortor

###### Blockquote styling

Borders, icons and images

###### Left border

Display optional left border

> Paid a cobra along or the sloth dear much eagle gosh from disagreeably lethargic before.

###### Left aligned image

Blockquote with optional left image

> Dear far dove lynx inaudibly between after under after on some far warthog.

###### Left aligned icon

Add optional left icon using flex utilities

> Paid a cobra along or the sloth dear much eagle gosh from disagreeably lethargic before.

> Well hey as seagull more and staunchly uniquely much less alas delicate much checked.

###### Right border

Display optional right border

> Or a more far thought close mammoth that so one bee more fidgeted checked and written.

###### Right aligned image

Blockquote with optional right image

> Well hey as seagull more and staunchly uniquely much less alas delicate much checked.

###### Right aligned image

Add optional right icon using flex utilities

> Or a more far thought close mammoth that so one bee more fidgeted checked and written.

> Well hey as seagull more and staunchly uniquely much less alas delicate much checked.