Demos: o-editorial-typography

<h1 class="o-editorial-typography-headline">
  Don&#x2019;t settle for black and white
</h1>

<h1 class="o-editorial-typography-heading-level-1">
  Heading level 1 &#x2014; Don&#x2019;t settle for black and white
</h1>
<h2 class="o-editorial-typography-heading-level-2">
  Heading level 2 &#x2014; Don&#x2019;t settle for black and white
</h2>
<h3 class="o-editorial-typography-heading-level-3">
  Heading level 3 &#x2014; Don&#x2019;t settle for black and white
</h3>
<h4 class="o-editorial-typography-heading-level-4">
  Heading level 4 &#x2014; Don&#x2019;t settle for black and white
</h4>
<h5 class="o-editorial-typography-heading-level-5">
  Heading level 5 &#x2014; Don&#x2019;t settle for black and white
</h5>

<p class="o-editorial-typography-body">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet earum libero at
  voluptatum illum facere totam architecto eum porro exercitationem, ea,
  accusamus quia? Repellat beatae similique ab? Reprehenderit, ullam quae?
</p>

<ul class="o-editorial-typography-list o-editorial-typography-list--unordered">
  <li>Lorem ipsum&#xA0;adipiscing elit.</li>
  <li>Sed feugiat turpis at massa tristique.</li>
  <li>Curabitu r accumsan elit luctus.</li>
</ul>

<ol class="o-editorial-typography-list o-editorial-typography-list--ordered">
  <li>Lorem ipsum&#xA0;adipiscing elit.</li>
  <li>Sed feugiat turpis at massa tristique.</li>
  <li>Curabitu r accumsan elit luctus.</li>
</ol>

<p class="o-editorial-typography-standfirst">
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam autem
  dignissimos perspiciatis odio dolorum aut cumque eaque excepturi quia error.
</p>

<div class="o-editorial-typography-byline">
  <a class="o-editorial-typography-author" href="#">Joe Doe</a> in London
  <time
    class="o-editorial-typography-timestamp"
    datetime="2019-10-11T20:51:54Z"
    title="October 11 2019 9:51 pm"
    aria-label="October 11 2019"
    >October 11 2019</time
  >
</div>

<a class="o-editorial-typography-topic" href="#">Topic Link</a>

<figure>
  <img
    alt
    src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fim.ft-static.com%2Fcontent%2Fimages%2Fa60ae24b-b87f-439c-bf1b-6e54946b4cf2.img?width=250&amp;source=origami-build-tools"
  />
  <figcaption class="o-editorial-typography-caption">
    &#xA9;Lorem John Doe
  </figcaption>
</figure>