o-editorial-layout

_Typography styles and layout for editorial content._

- Usage
- Markup
- Sass
- Migration guide
- Contact
- Licence

o-editorial-layout provides margin and layout for editorial typography for specific contexts such as an article page.

o-editorial-layout currently provides margins between typographical elements, asides, and figures. It could be expanded to include the layout of article pages themselves.

Usage

Check out how to include Origami components in your project to get started with o-editorial-layout.

Markup

Headings 1-5 are provided with their margin with the class o-editorial-layout-heading-level-[level]:

``html


Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

`

For paragraphs use the o-editorial-layout-body class:

`html



Lorem ipsum dolor sit amet consectetur adipisicing elit.



`

Adjacent figure, aside, and div elements will have margin applied.

A wrapper class o-editorial-layout-wrapper may be used to style child elements based on their semantic meaning. This includes headings, paragraphs, lists, figure captions, footers, blockquotes, and more. See a full example in the wrapper registry. Only direct children, and in some cases the children of paragraph elements, are styled.

`html



`

Sass

Include all o-editorial-layout styles by including the oEditorialLayout mixin.

`scss
@import '@financial-times/o-editorial-layout/main';

@include oEditorialLayout();
`

To include just the styles you need we recommend setting the options $opts argument.

For example to include only heading levels 1-3 and body copy styles.

`scss
@include oEditorialLayout(
$opts: (
'body': true,
'headings': (
1,
2,
3,
),
'wrapper': true,
)
);
`

We recommend including styles with oEditorialLayout and using default markup to reduce duplicated CSS in your project. However you may also use oEditorialLayoutHeading and oEditorialLayoutBody to apply styles to your own markup _(note: placeholders are used, which ay effect the source order of your CSS)_.

For example to output a heading:

`scss
.my-h2-with-margin {
@include oEditorialLayoutHeading(2);
}
``

See the o-editorial-layout Sassdoc for more details.

Migration guide

| State | Major Version | Last Minor Release | Migration guide |
| :----------: | :-----------: | :----------------: | :---------------------------------------------------: |
| ⚠ maintained | 3 | N/A | migrate to v3 |
| ╳ deprecated | 2 | 2.4 | migrate to v2 |
| ╳ deprecated | 1 | 1.4 | N/A |

Contact

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

Licence

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