Typography

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>

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

This line rendered as bold text.

This line rendered as italicized text.

This is an abbr

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<p>This is an <abbr title="Abbreviation">abbr</abbr></p>

hr

<hr>

Blockquotes

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>

Code

Code styling is kept basic – just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.

For example, section should be wrapped as inline.

Sample text here...
Sample code here...
<p>For example, <code>section</code> should be wrapped as inline.</p>
<pre>Sample text here...</pre>
<pre><code>Sample code here...</code></pre>

Lists

margin-bottom of nested lists is removed.

  • Lists have basic styles
  • They can be nested like this
    • Can nest either type of list into the other
    • Nested lists have there bottom margin removed
  • They have a bottom margin which is same as other block elements like paragraphs, forms
<ul>
  <li>Lists have basic styles</li>
  <li>They can be nested like this
    <ul>
      <li>Can nest either type of list into the other</li>
      <li>Nested lists have there bottom margin removed</li>
    </ul>
  </li>
  <li>They have a bottom margin which is same as other block elements like paragraphs, forms</li>
</ul>

Ordered

  1. Lists have basic styles
  2. They can be nested like this
    • Can nest either type of list into the other
    • Nested lists have there bottom margin removed
  3. They have a bottom margin which is same as other block elements like paragraphs, forms
<ol>
  <li>Lists have basic styles</li>
  <li>They can be nested like this
    <ul>
      <li>Can nest either type of list into the other</li>
      <li>Nested lists have there bottom margin removed</li>
    </ul>
  </li>
  <li>They have a bottom margin which is same as other block elements like paragraphs, forms</li>
</ol>

Unstyled

Add .unstyled class to remove bullets. This does not effect nested lists.

  • Lists have basic styles
  • They can be nested like this
    • Can nest either type of list into the other
    • Nested lists have there bottom margin removed
  • They have a bottom margin which is same as other block elements like paragraphs, forms
<ul class="unstyled">
  <li>Lists have basic styles</li>
  <li>They can be nested like this
    <ul>
      <li>Can nest either type of list into the other</li>
      <li>Nested lists have there bottom margin removed</li>
    </ul>
  </li>
  <li>They have a bottom margin which is same as other block elements like paragraphs, forms</li>
</ul>

Horizontal

Add .horizontal class to make a list horizontal. Useful for navigation links.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="horizontal">
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>

Justified

Add .justified class to have equally sized content. Useful for navigation links.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="justified">
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>