Elements

Headings

This is how default heading elements appear.

Heading 1 blah blah blah lots of words and stuff and things yadda yadda

Heading 2 blah blah blah lots of words and stuff and things yadda yadda

Heading 3 blah blah blah lots of words and stuff and things yadda yadda

Heading 4 blah blah blah lots of words and stuff and things yadda yadda

Heading 5 blah blah blah lots of words and stuff and things yadda yadda
Heading 6 blah blah blah lots of words and stuff and things yadda yadda
<h1>Heading 1 blah blah blah lots of words and stuff and things yadda yadda</h1>
<h2>Heading 2 blah blah blah lots of words and stuff and things yadda yadda</h2>
<h3>Heading 3 blah blah blah lots of words and stuff and things yadda yadda</h3>
<h4>Heading 4 blah blah blah lots of words and stuff and things yadda yadda</h4>
<h5>Heading 5 blah blah blah lots of words and stuff and things yadda yadda</h5>
<h6>Heading 6 blah blah blah lots of words and stuff and things yadda yadda</h6>

Body Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at commodo nunc. Morbi pulvinar condimentum augue quis tincidunt. Aliquam bibendum dapibus sapien. Donec sed rutrum lorem, nec elementum dui. Donec mollis lacus nec consectetur dignissim. Pellentesque malesuada tincidunt sollicitudin. Sed varius sapien quis sapien accumsan rhoncus. Proin et nunc sit amet lorem porttitor tincidunt vel eu ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis at accumsan dolor, non dictum sapien. Suspendisse rhoncus dolor non nisl ultrices fringilla.

Nullam sit amet dolor tincidunt, dictum turpis id, tristique lorem. Curabitur suscipit libero sit amet ipsum euismod, vel rhoncus eros aliquam. Donec justo risus, vehicula eleifend rhoncus non, tincidunt at sem. Duis commodo molestie sodales. In lacinia est eget ex aliquet egestas. Donec fringilla tincidunt leo auctor malesuada. Maecenas cursus ac mauris ut tempor. Integer dictum turpis augue, vitae semper libero sagittis non. Nunc enim urna, laoreet quis erat a, suscipit volutpat libero. Pellentesque sit amet gravida ipsum, vel ornare orci. Phasellus lacinia ac ligula at viverra. Aliquam ac ligula a nisi dictum sodales. Nullam convallis urna a turpis efficitur faucibus. In in risus sed ante ultrices euismod vel a augue. Ut tellus mauris, cursus nec lacinia nec, euismod eu ex.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at commodo nunc. Morbi pulvinar condimentum augue quis tincidunt. Aliquam bibendum dapibus sapien. Donec sed rutrum lorem, nec elementum dui. Donec mollis lacus nec consectetur dignissim. Pellentesque
  malesuada tincidunt sollicitudin. Sed varius sapien quis sapien accumsan rhoncus. Proin et nunc sit amet lorem porttitor tincidunt vel eu ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis at accumsan
  dolor, non dictum sapien. Suspendisse rhoncus dolor non nisl ultrices fringilla.</p>
<p>Nullam sit amet dolor tincidunt, dictum turpis id, tristique lorem. Curabitur suscipit libero sit amet ipsum euismod, vel rhoncus eros aliquam. Donec justo risus, vehicula eleifend rhoncus non, tincidunt at sem. Duis commodo molestie sodales. In lacinia
  est eget ex aliquet egestas. Donec fringilla tincidunt leo auctor malesuada. Maecenas cursus ac mauris ut tempor. Integer dictum turpis augue, vitae semper libero sagittis non. Nunc enim urna, laoreet quis erat a, suscipit volutpat libero. Pellentesque
  sit amet gravida ipsum, vel ornare orci. Phasellus lacinia ac ligula at viverra. Aliquam ac ligula a nisi dictum sodales. Nullam convallis urna a turpis efficitur faucibus. In in risus sed ante ultrices euismod vel a augue. Ut tellus mauris, cursus
  nec lacinia nec, euismod eu ex.</p>

Blockquotes

Among parents whose children visited an emergency department for a mental health assessment or treatment, those who received injury prevention education from hospital staff are significantly more likely to limit access to lethal means of self-harm than are families who did not receive such education.

<blockquote>
  <p>Among parents whose children visited an emergency department for a mental health assessment or treatment, those who received injury prevention education from hospital staff are significantly more likely to limit access to lethal means of self-harm than
    are families who did not receive such education.</p>
  <footer>
    &ndash; <cite>Kelsey Snell, <a href="https://www.washingtonpost.com/news/powerpost/wp/2015/12/10/spending-negotiations-to-stretch-into-next-week/">The Washington Post</a></cite>
  </footer>
</blockquote>

Lists

This is how default ul and ol elements appear.

  • List item
  • List item
  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
  4. List item
  5. List item
<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<ol>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

Description Lists

Description lists appear vertical by default.

Term
Definition
Term
Definition
Term
Definition
Term
Definition
Term
Definition
<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
  <dt>Term</dt>
  <dd>Definition</dd>
  <dt>Term</dt>
  <dd>Definition</dd>
  <dt>Term</dt>
  <dd>Definition</dd>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

Inline Elements

This is a link in its most default state.

You can use the <mark> tag to highlight text.

You can use the <abbr> tag to format abbreviations, like HTML.

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><a href="#">This is a link</a> in its most default state.</p>
<p>You can use the <code>&lt;mark&gt;</code> tag to <mark>highlight</mark> text.</p>
<p>You can use the <code>&lt;abbr&gt;</code> tag to format abbreviations, like <abbr title="HyperText Markup Language">HTML</abbr>.</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>

Input Checkbox

Base

<input type="checkbox" id="CheckboxBase" />
<label for="CheckboxBase">Checkbox</label>

Disabled

<input disabled type="checkbox" id="CheckboxDisabled" />
<label disabled for="CheckboxDisabled">Checkbox</label>

Input Radio

Base

<input type="radio" id="RadioBase" name="RadioBase" />
<label for="RadioBase">Radio</label>

Disabled

<input disabled type="radio" id="RadioDisabled" name="RadioDisabled" />
<label disabled for="RadioDisabled">Radio</label>