Origami Frontend Components & Services

Demos: o-editorial-typography

Headline

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

Headings

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

Body

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

Unordered List

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

Ordered List

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

Standfirst

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

Byline With Timestamp

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

Topic Tag

The style of a topic tag. The size is not set by o-editorial-typography, it is inherited from context as a topic tag may be used in many contexts.

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

Caption

<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>
Status
active
Switch component view

GitHub Repository

Install o-editorial-typography

If using the Build Service, add o-editorial-typography@^2.0.1 to your link tag.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-editorial-typography@^2.0.1".

Help & Support

o-editorial-typography is maintained directly by the Origami team. If you have any questions about o-editorial-typography or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com