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

GitHub Repository

Install o-editorial-typography

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

If running a Manual Build, run bower install --save "o-editorial-typography@^1.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