o3-editorial-typography

Typographic styles for editorial content.

• o3-editorial-typography
  • Overview
  • Markup
    • Heading styles
      • HTML
      • JSX
    • Body and dropcap
      • HTML
      • JSX
    • Editorial detail styles
      • Topic Tag
      • Standfirst
      • Summary
      • Caption
      • Byline
    • Quote
    • Big Number
    • Lists
  • Theme modifiers
  • Migration
  • Contact
  • Licence

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.

HTML

<h1 class="o3-editorial-typography-display" 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="display" 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 | display | 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 display. |

Body and dropcap

o3-foundation provides typography usecase tokens, including for editorial body copy (see o3-type-body-content-* classes). o3-editorial-typography builds on this by providing an optional drop cap style, o3-editorial-typography-drop-cap.

HTML

<p class="o3-editorial-typography-drop-cap o3-type-body-content-base">
    This is a small paragraph of text with a drop cap.
</p>

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:

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

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:

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:

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> in
    London
    <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>
    {''} in London {''}
    <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:

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

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:

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:

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:

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 {Heading} from '@financial-times/o3-editorial-typography/cjs';

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

Migration

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.