This is a Header 1

This is a Header 2

This is a Header 3

This is a Header 4

This is a Header 5

This is a Header 6

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.

This line rendered as bold text.

This line rendered as italicized text.

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

Abbreviations

attr

<p><abbr title="attribute">attr</abbr></p>

Blockquote

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>

Naming a source

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>

Lists

Bullet/unordered nested list

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
• Faucibus porta lacus fringilla vel

Numbered/ordered nested list

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

Callouts

<section class="callout callout-yellow">
  <h3>This is a yellow dashed callout</h3>
  <p>Just add class="callout callout-yellow". It's really that easy.</p>
</section>

Button

Learn more

Inline code

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.

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

<p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>

Code blocks

Use <pre> for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<code><pre><p>Sample text here...</p>
<p>And another line of sample text here...</p></code></pre>

Sample output

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

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Images

Left aligned

<img src="https://dummyimage.com/400x200/000/aaa" class="fr-fic fr-dib fr-fil">

Center aligned

<img src="https://dummyimage.com/400x200/000/aaa" class="fr-fic fr-dib">

Right aligned

<img src="https://dummyimage.com/400x200/000/aaa" class="fr-fic fr-dib fr-fir">

Image with caption

<figure>
  <img src="https://dummyimage.com/400x200/000/aaa" class="fr-fic fr-dii" alt="A generic square placeholder image in a figure.">
  <figcaption>A caption for the above image.</figcaption>
</figure>

Tables

Hyperlink TOC

Link to Header 3

<a href="#heading-3">Link to Header 3</a>