@financial-times/o3-editorial-typography

v2.0.0

Published

2 months ago

Origami typography with design tokens

Downloads

0High
0Medium
0Low

typography design-tokens

o3-editorial-typography

Typographic styles for editorial content.

o3-editorial-typography

Overview

o3-editorial-typography provides typographic styles for editorial content. It supports the following brands:

core
sustainable-view

For UI typography see o3-typography.

Markup

o3-editorial-typography supports JSX templates for React users, or direct HTML. We recommend using JSX where possible.

Heading styles

Heading styles are available in 5 different types.

| Type | Selector | Notes | | -------------- | --------------------------------------- | ------------------------------------------------------------------------------------ | | Headline Large | .o3-editorial-typography-headline-large | Large headline can take data-o3-editorial-underline attribute to add an underline. | | Headline | .o3-editorial-typography-headline | | | Chapter | .o3-editorial-typography-chapter | | | Subheading | .o3-editorial-typography-subheading | | | Label | .o3-editorial-typography-label | |

HTML

<h1 class="o3-editorial-typography-headline-large" data-o3-editorial-underline>
 Large headline
</h1>

<h1 class="o3-editorial-typography-headline">Headline</h1>

<h2 class="o3-editorial-typography-chapter">Chapter</h2>

<h3 class="o3-editorial-typography-subheading">Subheading</h3>

<h3 class="o3-editorial-typography-label">Label</h3>

JSX

The same heading styles can be used in JSX environments as well by importing <Headline> component and applying the type modifier. The component is exported as a commonjs module as well as an es module. Depending your project setup, you can import the component from /cjs or /esm directory.

import { Headline } from '@financial-times/o3-editorial-typography/cjs';

<Headline type="headline-large" underline={true}>Large headline</Headline>
<Headline type="headline">Headline</Headline>
<Headline type="chapter">Chapter</Headline>
<Headline type="subheading">Subheading</Headline>
<Headline type="label">Label</Headline>

<Headline> props:

| Prop | Type | Default | Description | | --- | --- | --- | --- | | type | headline-large | headline | chapter | subheading | label | headline | Type of the headline.| | theme | standard | inverse | - | Theme of the headline. | | underline | boolean | false | Adds an underline to the headline. Valid only for headline-large. |

Body/Paragraph styles

O3 editorial paragraphs are styled with the o3-editorial-typography-body class.

HTML

<p class="o3-editorial-typography-body">This is a small paragraph of text.</p>

JSX

While using JSX, you can import the <Body> component and apply the type prop.

import {Body} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<Body>This is a paragraph of text.</Body>;

<Body> props:

| Prop | Type | Default | Description | | --- | --- | --- | --- | | theme | standard | inverse | standard | Theme of the body. | | dropCap | boolean | false | Style the first letter as a drop cap, for supported brands. |

Note: if the children of the <Body> component are not text, the wrapper element with be a <div> element. If the children are just string, the wrapper element will be a <p> element.

Editorial detail styles

The package exports components that can be used to style additional information in the editorial content.

Topic Tag

Also called display tag, are category labels in the FT. Used in teasers (article cards) to indicate the category of a post. A topic tag is usually an anchor but does not have to be if there is no page to link to. Pure HTML markup is as follows:

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

or with JSX import:

import {TopicTag} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<TopicTag href="#">Topic Link</TopicTag>
<TopicTag>Topic Without Link</TopicTag>

<TopicTag> props:

| Prop | Type | Default | Description | | --- | --- | --- | --- | | href | string | - | URL to link the topic tag. The presence of href prop will determine rendered element tag | | theme | standard | inverse | standard | Theme of the topic tag. |

Color and hover colour of the topic tag can be customized by using the following CSS variables:

| Variable | Description | Default | | ------------------------------------------------- | ----------------------------- | ---------------------- | | --o3-editorial-typography-topic-tag-color | Colour of the topic tag | claret - for core | | --o3-editorial-typography-topic-tag-hover-color | Hover colour of the topic tag | claret-30 - for core |

Standfirst

Short intro below the headline that provides context about a post. Used in combination with a header in the topper component. Pure HTML markup is as follows:

<p class="o3-editorial-typography-standfirst">Standfirst</p>

or with JSX import:

import {Standfirst} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<Standfirst>Standfirst</Standfirst>;

<Standfirst> props:

| Prop | Type | Default | Description | | ----- | ----------------------- | ---------- | ------------------------ | | theme | standard | inverse | standard | Theme of the standfirst. |

Summary

Use to provide a concise summary of the article, offering a quick, high-level overview of the key points. It allows readers to grasp the main ideas without reading the entire article.

<p class="o3-editorial-typography-summary">Summary</p>

or with JSX import:

import {Summary} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<Summary>Summary</Summary>;

Caption

For additional information about a piece or image that should be less prominent. Pure HTML markup is as follows:

<figcaption class="o3-editorial-typography-caption">Caption</figcaption>

or with JSX import:

import {Caption} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<Caption>Caption</Caption>;

<Caption> props:

| Prop | Type | Default | Description | | --- | --- | --- | --- | | theme | standard | inverse | standard | Theme of the caption. |

Byline

Byline is a composite component that includes author name, location and timestamp. It is used to display author details in the editorial content.

Author name is usually an anchor but does not have to be if there is no page to link to. Pure HTML markup is as follows:

<div class="o3-editorial-typography-byline">
 <a class="o3-editorial-typography-byline-author" href="#">Joe Doe</a>
 &nbsp;
 <span class="o3-editorial-typography-byline-location">in London</span>
 &nbsp;
 <time
  class="o3-editorial-typography-byline-timestamp"
  datetime="2019-10-11T20:51:54Z"
  title="October 11 2019 9:51 pm"
  >October 11 2019</time
 >
</div>

or with JSX import:

import {Byline} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<Byline>
 <a className="o3-editorial-typography-byline-author" href="#">
  Joe Doe
 </a>
 &nbsp;
 <span className="o3-editorial-typography-byline-location">in London</span>
 &nbsp;
 <time
  className="o3-editorial-typography-byline-timestamp"
  dateTime="2019-10-11T20:51:54Z"
  title="October 11 2019 9:51 pm">
  October 11 2019
 </time>
</Byline>;

<Byline> props:

| Prop | Type | Default | Description | | --- | --- | --- | --- | | theme | standard | inverse | standard | Theme of the byline. |

Byline author colour and hover color can be customized by using the following CSS variables:

| Variable | Description | Default | | ----------------------------------------------------- | --------------------------------- | ---------------------- | | --o3-editorial-typography-byline-author-color | Colour of the byline author | claret - for core | | --o3-editorial-typography-byline-author-hover-color | Hover colour of the byline author | claret-30 - for core |

Quote

Quote is a composite component that includes quote text, author and caption. It is used to display direct words said by a person. It comes in two types: block and pull. The difference between the two is that block quote has vertical line on the left side of the quote, while pull quote has none. Pure HTML markup is as follows:

<blockquote class="o3-editorial-typography-blockquote">
 <p>
  Origami is about empowering developers of all levels to build robust,
  on-brand products ranging from simple static sites through to rich, dynamic
  web applications, to do it faster, to do it cheaper, and leave them more
  supportable and more maintainable.
 </p>
 <cite>
  <span class="o3-editorial-typography-blockquote__author">Quote Author</span>
  <span class="o3-editorial-typography-blockquote__caption"
   >Quote Source</span
  >
 </cite>
</blockquote>

or with JSX import:

import {Quote} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<Quote
 type="pull"
 quoteAuthor="Quote Author"
 quoteSource="Quote Source"
 quoteIcon={true}>
 Origami is about empowering developers of all levels to build robust, on-brand
 products ranging from simple static sites through to rich, dynamic web
 applications, to do it faster, to do it cheaper, and leave them more
 supportable and more maintainable.
</Quote>;

<Quote> props:

| Prop | Type | Default | Description | | --- | --- | --- | --- | | type | block | pull | block | Quote text. | | quoteAuthor | string | - | Author of the quote. | | quoteSource | string | - | Source of the quote. | | quoteIcon | boolean | true | Adds an icon to the quote. | | theme | standard | inverse | standard | Theme of the quote. |

Big Number

Big Number is a composite component that includes a large number and a label. It is used to describe a big number in the editorial content. Pure HTML markup is as follows:

<div class="o3-editorial-typography-big-number">
 <div class="o3-editorial-typography-big-number__title">£27,5m</div>
 <div class="o3-editorial-typography-big-number__content">
  Cost expected to increase by £13.7m a year.
 </div>
</div>

import {BigNumber} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<BigNumber title="£27,5m">
 Cost expected to increase by £13.7m a year.
</BigNumber>;

<BigNumber> props:

| Prop | Type | Default | Description | | --- | --- | --- | --- | | title | string | - | Title of the big number. | | theme | standard | inverse | standard | Theme of the big number. |

Lists

o3-editorial-typography supports ordered and unordered lists. Use the classes o3-editorial-typography-list-ordered or o3-editorial-typography-list-unordered.

Lists may be used in different contexts they inherit font properties such as size and family. It's therefore required to apply font styles to a parent element. E.g. this could be done with o3-editorial-typography-body:

<div class="o3-editorial-typography-body">
 <ol class="o3-editorial-typography-list-ordered">
  <li>Lorem ipsum adipiscing elit.</li>
  <li>Sed feugiat turpis at massa tristique.</li>
  <li>Curabitu r accumsan elit luctus.</li>
 </ol>
</div>

import {Body, List} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<Body>
 <List
  type="ordered"
  listItems={[
   'Lorem ipsum adipiscing elit.',
   'Sed feugiat turpis at massa tristique.',
   'Curabitu r accumsan elit luctus.',
  ]}
 />
</Body>;

<List> props:

| Prop | Type | Default | Description | | --- | --- | --- | --- | | type | ordered | unordered | - | Type of the list. | | theme | standard | inverse | standard | Theme of the list. | | listItems | Array<string> | - | List items. |

Links

Links are styled using o3-editorial-typography-link inside a o3-editorial-typography-body container.

<p class="o3-editorial-typography-body">
 An article by
 <a href="https://ft.com/" class="o3-editorial-typography-link"
  >The Financial Times</a
 >.
</p>

import {Body, Link} from '@financial-times/o3-editorial-typography/cjs'; // or /esm

<Body>
 An article by
 <Link href="https://ft.com/">The Financial Times</Link>.
</Body>;

<Link> props:

| Prop | Type | Default | Description | | --- | --- | --- | --- | | href | string | - | URL to link the text. | | theme | standard | inverse | standard | Theme of the link. | | anchorTarget | _blank | - | Text to be linked. |

Theme modifiers

All component can have theme modifiers. By default, the theme is standard and is not required. o3-editorial-typography also supports the inverse theme. Adding data-o3-theme="inverse" to the wrapper element or at the element itself will change the colour of the text to white. Inverse theme is supported by all exported components. Pure HTML markup is as follows:

<h3 class="o3-editorial-typography-label" data-o3-theme="inverse">Label</h3>

or if you are using JSX templates, theme can be passed as theme prop:

import {Headline} from '@financial-times/o3-editorial-typography/cjs';

<Headline type="headline" theme="inverse">
 Headline
</Headline>;

Migration

| State | Major Version | Last Minor Release | Migration guide | | :-------: | :-----------: | :----------------: | :-------------: | | ✨ active | 1 | N/A | N/A |

Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.

Licence

This software is published by the Financial Times under the MIT licence.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

o3-editorial-typography

Overview

Markup

Heading styles

HTML

JSX

Body/Paragraph styles

HTML

JSX

Editorial detail styles

Topic Tag

Standfirst

Summary

Caption

Byline

Quote

Big Number

Lists

Links

Theme modifiers

Migration

Contact

Licence