Headings, paragraphs, blockquotes, lists, and more have some global resets. It’s worth noting these aren’t the same as our Markdown styles.

Headings

Level 1 heading

Level 2 heading

Level 3 heading

Level 4 heading

Level 5 heading

Level 6 heading

<h1>Level 1 heading</h1>
<h2>Level 2 heading</h2>
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 6 heading</h6>

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.

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

Lead paragraph

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.

<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.</p>

Inline text elements

Styling for common inline HTML5 elements.

The element is used to highlight text.

The <del> element is used to mark up ~~deleted text~~.

The <s> element is used mark up ~~text that is to be treated as no longer accurate~~.

The <ins> element is used to mark up text that has been added to the document.

The element is used to mark up text as being less important.

The element is used to mark up emphasised text.

The element is used to mark up text as being more important.

<p>The &lt;mark&gt; element is used to <mark>highlight text</mark>.</p>
<p>The &lt;del&gt; element is used to mark up <del>deleted text</del>.</p>
<p>The &lt;s&gt; element is used mark up <s>text that is to be treated as no longer accurate</s>.</p>
<p>The &lt;ins&gt; element is used to mark up <ins>text that has been added</ins> to the document.</p>
<p>The &lt;small&gt; element is used to mark up <small>text as being less important</small>.</p>
<p>The &lt;em&gt; element is used to mark up <em>emphasised text</em>.</p>
<p>The &lt;strong&gt; element is used to mark up <strong>text as being more important</strong>.</p>

See the complete list of inline elements

Blockquotes

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a .

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>
</blockquote>

Lists

Unordered list

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

Lorem ipsum dolor sit amet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Ordered list

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

Lorem ipsum dolor sit amet
Nulla volutpat aliquam velit
1. Phasellus iaculis neque
2. Purus sodales ultricies
3. Vestibulum laoreet porttitor sem
4. Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Nulla volutpat aliquam velit
    <ol>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ol>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>

Description list

A list of terms and their descriptions, for instance glossaries, displaying metadata and other key-value pairs, etc.

A term with a single description: Aenean lacinia bibendum nulla sed consectetur.
Multiple terms can share the same description
A term with the same description as the one above: Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
A term can have multiple descriptions: (1) Vestibulum id ligula porta felis euismod semper.; (2) Donec ullamcorper nulla non metus auctor fringilla.

<dl>
<dt>A term with a single description</dt>
<dd>Aenean lacinia bibendum nulla sed consectetur.</dd>
<dt>Multiple terms can share the same description</dt>
<dt>A term with the same description as the one above</dt>
<dd>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</dd>
<dt>A term can have multiple descriptions</dt>
<dd><i>(1)</i> Vestibulum id ligula porta felis euismod semper.</dd>
<dd><i>(2)</i> Donec ullamcorper nulla non metus auctor fringilla.</dd>
</dl>

Typography

Contents