# Shortcodes: General Typography

#### Headings

All HTML headings, `<h1>` through `<h6>`, are available. Create lighter, secondary text in any heading with a generic `<small>` tag or the `.small` class.

# h1 heading Secondary text
## h2 heading Secondary text
### h3 heading Secondary text
#### h4 heading Secondary text
##### h5 heading Secondary text
###### h6 heading Secondary text

    <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
    <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
    <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
    <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
    <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
    <h6>h6. Bootstrap heading <small>Secondary text</small></h6>

#### Body copy & lead body copy

Make a paragraph stand out by adding `.lead`:

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

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.

    <p class="lead">...</p>
    <p>...</p>

#### Dividers

You can insert dividers to break up content and draw the user's eye to the next section.

##### Divider line 1

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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

##### Divider line 2

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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

##### Divider line 3

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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    <div class="divider line-01"></div>

#### Blockquotes

For quoting blocks of content from another source within your document.

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

    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>

#### List Styles

A list of items in which the order does not explicitly matter.

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
  - Phasellus iaculis neque
  - Purus sodales ultricies
- Faucibus porta lacus fringilla vel

    <ul>
      <li>...</li>
    </ul>

A list of items in which the order does explicitly matter.

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Phasellus iaculis neque

    <ol>
      <li>...</li>
    </ol>

Add a `list-style` for Theme Lambda's custom lists:

- list-style-1
- list-style-1
- list-style-1

- list-style-2
- list-style-2
- list-style-2

- list-style-3
- list-style-3
- list-style-3

    <ul class="list-style-1"> | <ul class="list-style-2"> | <ul class="list-style-3">
      <li>...</li>
    </ul>

Add `colored` to the class of the custom lists to style them in the theme's main color:

- list-style-1
- list-style-1
- list-style-1

- list-style-2
- list-style-2
- list-style-2

- list-style-3
- list-style-3
- list-style-3

    <ul class="list-style-1 colored"> | <ul class="list-style-2 colored"> | <ul class="list-style-3 colored">
      <li>...</li>
    </ul>

#### Emphasis, Highlight and Alert

Wrap any text in `.label`, `.alert` and one of the four contextual classes (e.g., `.text-success`) for context based messages.

muted - Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. success - Duis mollis, est non commodo luctus, nisi erat porttitor ligula. info - Maecenas sed diam eget risus varius blandit sit amet non magna. warning - Etiam porta sem malesuada magna mollis euismod. danger - Donec ullamcorper nulla non metus auctor fringilla.
Default Success Info Warning Danger
Well done! You successfully read this important alert message. Heads up! This alert needs your attention, but it's not super important. Warning! Better check yourself, you're not looking too good. Oh snap! Change a few things up and try submitting again.

    <p class="text-muted">...</p>
    <p class="text-success">...</p>
    <p class="text-info">...</p>
    <p class="text-warning">...</p>
    <p class="text-danger">...</p>

    <span class="label label-default">Default</span>
    <span class="label label-success">Success</span>
    <span class="label label-info">Info</span>
    <span class="label label-warning">Warning</span>
    <span class="label label-danger">Danger</span>

    <div class="alert alert-success">...</div>
    <div class="alert alert-info">...</div>
    <div class="alert alert-warning">...</div>
    <div class="alert alert-danger">...</div>

#### Headlines

You can add a `.headline` to a label. Use this style to define a hierarchy in your course or to mark specific sections.

Please note: The colors for the headlines are used from the 'main color' and the 'menu color' which can be defined in the theme options.

Headline-v1 Sample Heading Headline-v2 Sample Heading Headline-v3 Sample Heading
Headline-v1 Heading and Icon Headline-v2 Heading and Icon Headline-v3 Heading and Icon

    <p class="headline headline-v1">Headline-v1 Sample Heading</p>
    <p class="headline headline-v2">Headline-v2 Sample Heading</p>
    <p class="headline headline-v3">Headline-v3 Sample Heading</p>

    <p class="headline headline-v1"><i class="fa fa-folder-open"></i> Headline-v1 Heading and Icon</p>
    <p class="headline headline-v2"><i class="fa fa-folder-open"></i> Headline-v2 Heading and Icon</p>
    <p class="headline headline-v3"><i class="fa fa-folder-open"></i> Headline-v3 Heading and Icon</p>

#### Images

Add classes to an `<img>` element to easily style images in any project.

    <img src="..." class="img-rounded">
    <img src="..." class="img-circle">
    <img src="..." class="img-polaroid">