<!-- Headings -->
<h1>h1. Cartzilla heading</h1>
<h2>h2. Cartzilla heading</h2>
<h3>h3. Cartzilla heading</h3>
<h4>h4. Cartzilla heading</h4>
<h5>h5. Cartzilla heading</h5>
<h6>h6. Cartzilla heading</h6>

<!-- Display headings -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

<!-- Body text sizes -->
<p class="fs-1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p class="fs-2">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p class="fs-3">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p class="fs-4">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p class="fs-5">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p class="fs-6">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p class="fs-xl">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p class="fs-lg">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p class="fs-sm">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>
<p class="fs-xs">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>

<!-- Inline text elements -->
<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><a href="#">Inline link</a></p>

<!-- Abbreviations -->
<p><abbr title="attribute">attr</abbr></p>
<p><abbr class="initialism" title="HyperText Markup Language">HTML</abbr></p>

<!-- Blockquote -->
<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

<!-- Unordered list -->
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
</ol>

<!-- Unstyled list -->
<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
</ul>

<!-- Inline list -->
<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum dolor</li>
  <li class="list-inline-item">Consectetur adipiscing</li>
  <li class="list-inline-item">Integer molestie</li>
</ul>

<!-- Description list basic example -->
<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
</dl>