Origami Frontend Components & Services

SassDoc: o-editorial-typography

oEditorialTypography(opts)

Output oEditorialTypography features.

parameter type default description
opts (optional) ('body': true, 'lists': ('ordered', 'unordered'), 'caption': true, 'headline': true, 'headings': (1, 2, 3, 4, 5), 'author': true, 'standfirst': true, 'topic': true, 'byline': true, 'timestamp': true, 'fonts': true) The features of o-editorial-typography to output classes for. See the [README](https://registry.origami.ft.com/components/o-editorial-typography/readme) for more details.

Examples

Example #1

all o-editorial-typography css classes.

@include oEditorialTypography();

Example #2

a granular selection of o-editorial-typography css classes. See the README for a full list of options.

@include oEditorialTypography((
	'body': true,
	'headings': (1, 2, 3),
	'lists': ('unordered'),
));

Links

oEditorialTypographyBody

Output editorial styles for body text.

Example

p {
	@include oEditorialTypographyBody();
}

Links

oEditorialTypographyList(type, include-base-styles)

Output editorial styles for lists. Styles child li elements. Apply to a containing list element such as ul or ol. Does not output font styles, these are inherited (@see oEditorialTypographyBody).

Wraps an o-typography mixin so the two may diverge (@see oTypographyList)

parameter type default description
type (optional) null "ordered", "unordered", or null for just the base styles shared by all lists
include-base-styles (optional) true set to false to exclude base styles which are shared by all list types

Examples

Example #1

the styles for an unordered list.

.my-unordered-list {
	@include oEditorialTypographyList('unordered');
}

Example #2

the styles for an ordered and unordered list, sharing base list styles.

.my-list {
	@include oEditorialTypographyList();
}

.my-list--ordered {
	@include oEditorialTypographyList('ordered', $include-base-styles: false);
}

.my-list--unordered {
	@include oEditorialTypographyList('unordered', $include-base-styles: false);
}

Links

oEditorialTypographyCaption

Output styles for captions, e.g. for photo or video credit/caption.

Links

oEditorialTypographyHeadline

Output styles for large headline text. This style has high visual prominence.

Alternatively, you may prefer to use the level one heading style.

Links

oEditorialTypographyHeading(level)

Output styles for editorial page heading copy.

parameter type default description
level The heading level 1-5.

Links

oEditorialTypographyStandfirst

Output styles for editorial standfirst.

Links

oEditorialTypographyByline

Output styles for the editorial byline.

Links

oEditorialTypographyTimestamp

Output styles for a timestamp. Font family and size are inherited from the parent element so this mixin may be used in multiple contexts. For example timestamps in a comment section or a byline.

Links

oEditorialTypographyTag(type)

Output specific tag styles, such as author and topic tags, or styles for other tags of similar appearance. Font size is inherited from the parent element, for example if a tag is used within a byline it will be the same size as the byline text.

parameter type default description
type the type of tag ('topic', 'author', or `null` for an unspecific kind of tag).

Example

a topic and author tag.

.my-topic-tag {
	@include oEditorialTypographyTag('topic');
}

.my-author-tag {
	@include oEditorialTypographyTag('author');
}

Links

oEditorialTypographyDecorated(align, include-base-styles)

Output styles to decorate typography with a short, thick underline. Styles after pseudo element.

parameter type default description
align (optional) 'left' either 'left' or 'center'
include-base-styles (optional) true set to false to only output styles to modify standard decorator alignment

Examples

Example #1

a header.

.decorated-header {
	@include oEditorialTypographyDecorated();
}

Example #2

a centred header.

.centered-decorated-header {
	text-align: center;
	@include oEditorialTypographyDecorated($align: 'center');
}

Example #3

a centred and non-centred header without duplicating css.

.decorated-header {
	@include oEditorialTypographyDecorated();
}
.decorated-header--center {
	text-align: center;
	@include oEditorialTypographyDecorated($align: 'center', $include-base-styles: false);
}

Links

o-editorial-typography-load-fonts

If true, include fonts from o-fonts.

Defaults to the value of $o-typography-load-fonts. If you are using o-typography and have already indicated not to load fonts, preferring to load fonts manually, this variable does not need to be set. If you are not using o-typography, set this to false to load fonts manually.

Links

Support Status
active
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