Origami Frontend Components & Services

Demos: o-typography

Scale

Demonstrates the default typographic scale.

Line Width

Demonstrates line width capping for different font-sizes (see the SASS mixin `oTypographyMaxLineWidth`).

Headings

Headings.

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

Body

<p class="o-typography-body">Body - Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="o-typography-link">Link</a> a rem <strong class="o-typography-bold">excepturi</strong> consequuntur commodi dolores ad <em class="o-typography-italic">laboriosam</em> qui odit ipsum distinctio quos laborum dolore magnam iure rerum, enim deleniti saepe sunt.</p>
<p class="o-typography-body">Lorem ipsum dolor sit amet<sup class="o-typography-sup">Sup</sup>, consectetur adipisicing elit<sub class="o-typography-sub">Sub</sub>. <a class="o-typography-link" href="#">Link Necessitatibus asperiores</a></p>
<p class="o-typography-body">Lorem ipsum dolor <a href="#" class="o-typography-link--external">sit amet consectetur</a> adipisicing elit. Non atque doloribus quaerat, esse ipsum doloremque.</p>

Blockquote

<blockquote class="o-typography-blockquote">
	<p>Blockquote - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ea suscipit iusto perspiciatis harum, qui maxime necessitatibus facilis, quo natus rem accusamus autem! Magnam pariatur, perferendis molestiae et tenetur repudiandae.</p>
	<footer>by Oliver Powell</footer>
</blockquote>

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?source=origami-build-tools">
    <figcaption class="o-typography-caption">
        <a class="o-typography-link" href="#void">&#xA9;Lorem</a> John Doe
    </figcaption>
</figure>

Lists

<ul class="o-typography-list o-typography-list--unordered">
	<li>List</li>
	<li>List</li>
</ul>

<ol class="o-typography-list o-typography-list--ordered">
	<li>List ordered</li>
	<li>List ordered</li>
</ol>

Wrapper

As an alternative to adding classes to each html element, adding a wrapper class on a parent element will apply typographic styles to child html elements semantically.

<div class="o-typography-wrapper">
	<h1>Heading level 1</h1>
	<h2>Heading level 2</h2>
	<h3>Heading level 3</h3>
	<h4>Heading level 4</h4>
	<h5>Heading level 5</h5>

	<p>Body - Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#">Link</a> A rem <strong>excepturi</strong> consequuntur commodi dolores ad <em>laboriosam</em> qui odit ipsum distinctio quos laborum dolore magnam iure rerum, enim deleniti saepe sunt.</p>
	<p>Lorem ipsum dolor sit amet<sup>Sup</sup>, consectetur adipisicing elit<sub>Sub</sub> reiciendis neque et facilis quidem quasi autem tenetur adipisci eum aut magni atque cupiditate laboriosam. <a href="#">Link Necessitatibus asperiores</a></p>

	<blockquote>
		<p>Blockquote - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ea suscipit iusto perspiciatis harum,
			qui maxime necessitatibus facilis, quo natus rem accusamus autem! Magnam pariatur, perferendis molestiae et tenetur
			repudiandae.</p>
		<footer>by Oliver Powell</footer>
	</blockquote>

	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt aspernatur aut corporis eius. Neque consequuntur commodi consectetur ullam laudantium saepe.</p>

	<ul>
		<li>List</li>
		<li>List</li>
	</ul>

	<ol>
		<li>List ordered</li>
		<li>List ordered</li>
	</ol>

	<footer>Footer such as copyright notice.</footer>
</div>
Switch component view

GitHub Repository

Install o-typography

If using the Build Service, add o-typography@^5.12.0 to your script and link tags. Ensure the correct brand is set with a query parameter &brand=internal.

If running a Manual Build, run bower install --save "o-typography@^5.12.0".

Help & Support

o-typography is maintained directly by the Origami team. If you have any questions about o-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