<div class="main-title">
  <h1>This is a page title</h1>
</div>

<h1>This is a heading 1</h1>

<h2>This is a heading 2</h2>

<h3>This is a heading 3</h3>

<h4>This is a heading 4</h4>

<h1>This is a heading 1 <span class="main-title__caption">with a caption</span></h1>

<h1>This is a heading 1 <span class="main-title__caption main-title__caption--page">with a page number</span></h1>

<p>Claude Monet was a famous French painter whose work gave a name to the art movement Impressionism, which was concerned with capturing light and natural forms.</p>
<p>He was born on November 14, 1840, in Paris, France, and enrolled in the Academie Suisse. After an art exhibition in 1874, a critic insultingly dubbed Monet

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ul>
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ol>
<dl>
  <dt>Definition list term 1</dt>
  <dd>Definition list definition 1</dd>
  <dt>Definition list term 2</dt>
  <dd>Definition list definition 2</dd>
  <dt>Definition list term 3</dt>
  <dd>Definition list definition 3</dd>
  <dt>Definition list term 4</dt>
  <dd>Definition list definition 4</dd>
</dl>

<div class="hero" style="background-image: url(//www.magnoliabox.com/cdn/shop/collections/dancing_tigers_1200x.progressive.jpg?v=1637763839);">
  <div class="hero__caption">
    <h1 class="hero__title">@wildmanrouse</h1>
    <div class="hero__subtitle">





Photographer

</div>
  </div>
</div>

<ul>
  <li class="tag"><a href="" title="">Tag 1 text</a></li>
  <li class="tag"><a href="" title="">Tag 2 text</a></li>
  <li class="tag"><a href="" title="">Tag 3 text</a></li>
</ul>
<ul style="background:black; padding-bottom: 0.75em;">
  <li class="tag tag--inverse"><a href="" title="">Tag 1 text</a></li>
  <li class="tag tag--inverse"><a href="" title="">Tag 2 text</a></li>
  <li class="tag tag--inverse"><a href="" title="">Tag 3 text</a></li>
</ul>

<table class="table">
  <thead>
    <tr>
      <td>Column title</td>
      <td class="u-hidden-tablet">Column title hidden on tablet</td>
      <td class="numeric">Column title numeric</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text content</td>
      <td class="u-hidden-tablet">Cell content</td>
      <td class="numeric">£14.95</td>
    </tr>
    <tr>
      <td>Text content</td>
      <td class="u-hidden-tablet">Cell content</td>
      <td class="numeric">£34.95</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Footnote to table.</td>
    </tr>
  </tfoot>
</table>