npm package: @financial-times/o-editorial-layout
Description: Layout for editorial content. Including margins for editorial typography.
Latest version: 3.0.2

# o-editorial-layout

_Typography styles and layout for editorial content._

- [Usage](#usage)
- [Markup](#markup)
- [Sass](#sass)
- [Migration guide](#migration-guide)
- [Contact](#contact)
- [Licence](#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](https://origami.ft.com/documentation/components/#including-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
<h1 class="o-editorial-layout-heading-level-1">Heading level 1</h1>
<h2 class="o-editorial-layout-heading-level-2">Heading level 2</h2>
<h3 class="o-editorial-layout-heading-level-3">Heading level 3</h3>
<h4 class="o-editorial-layout-heading-level-4">Heading level 4</h4>
<h5 class="o-editorial-layout-heading-level-5">Heading level 5</h5>
```

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

```html
<p class="o-editorial-layout-body">
	Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
```

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](https://registry.origami.ft.com/components/o-editorial-layout). Only direct children, and in some cases the children of paragraph elements, are styled.

```html
<div class="o-editorial-layout-wrapper">
	<h1>heading 1</h1>
	<h2>heading 2</h2>

	<p>
		<a href="#">Lorem ipsum dolor sit amet consectetur</a> adipisicing elit.
	</p>

	<blockquote>
		<p>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, quaerat!
		</p>
		<footer><cite>Lorem, ipsum dolor.</cite></footer>
	</blockquote>

	<p><em>Some italic copy</em> adipisci consectetur.</p>

	<p>Quas<sup>sup</sup> and dolorem<sub>sub</sub> harum tempora omnis.</p>

	<ol>
		<li>Lorem ipsum&#xA0;adipiscing elit.</li>
		<li>Sed feugiat turpis at massa tristique.</li>
		<li>Curabitu r accumsan elit luctus.</li>
	</ol>
</div>
```

## 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](https://registry.origami.ft.com/components/o-editorial-layout/sassdoc) for more details.

## Migration guide

|    State     | Major Version | Last Minor Release |                    Migration guide                    |
| :----------: | :-----------: | :----------------: | :---------------------------------------------------: |
| ⚠ maintained |       3       |        N/A         | [migrate to v3](MIGRATION.md#migrating-from-v2-to-v3) |
| ╳ deprecated |       2       |        2.4         | [migrate to v2](MIGRATION.md#migrating-from-v1-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](https://github.com/Financial-Times/origami/issues), visit [#ft-origami](https://financialtimes.slack.com/messages/ft-origami/) or email [Origami Support](mailto:origami-support@ft.com).

## Licence

This software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT).