Origami Frontend Components & Services

Demos: o-editorial-layout

Content Body Margins

This demo shows editorial typography and margins.

<h1 class="o-editorial-layout-heading-1">heading 1</h1>
<h2 class="o-editorial-layout-heading-2">heading 2</h2>

<p class="o-editorial-layout-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex velit beatae saepe adipisci consectetur. Alias nesciunt aliquam saepe? Itaque ratione delectus hic dignissimos ad. Quaerat consectetur quam incidunt odit unde natus, quos recusandae quo? Cum adipisci ex rem maxime beatae quos autem magni. Dignissimos, consequuntur debitis fuga hic deserunt natus ducimus ad culpa vero? Voluptatum, similique accusamus aut, quidem nemo veniam amet est repellendus corporis dolor odio tempore placeat impedit odit officiis id quibusdam labore, reiciendis autem vero eaque quod quam fuga assumenda! Ad error unde dolorum quaerat ipsa quae odit delectus omnis illum voluptatibus. Explicabo perferendis voluptas consequuntur ea.</p>
<p class="o-editorial-layout-body">Quas dolorem harum tempora omnis veniam ut libero laboriosam fugiat accusamus cupiditate saepe accusantium error minus nam assumenda quod incidunt, obcaecati soluta consequatur impedit totam asperiores quasi optio eius? Temporibus, earum. Odit modi animi in eligendi. Dolores, quidem possimus debitis optio reiciendis, nulla corrupti animi maiores exercitationem ea temporibus at earum labore unde doloremque voluptas soluta! Autem, quasi totam rem obcaecati quae eum deleniti? Soluta praesentium velit libero voluptate. Neque adipisci sunt id sapiente sit iure autem optio exercitationem cum at hic harum rem, totam deserunt dolorum, necessitatibus natus. Sequi, consequuntur voluptates. Adipisci hic inventore dolorum laudantium ullam, aspernatur explicabo?</p>
<p class="o-editorial-layout-body">Veritatis dicta veniam odit provident rerum aperiam ipsa ducimus architecto voluptate optio, perferendis quidem beatae magnam ut est facilis, quos vitae neque facere quisquam. Culpa animi, recusandae tempore maxime incidunt molestias, dolore nulla facilis porro illo mollitia consectetur modi ex iusto exercitationem dolorem voluptates nostrum nisi fuga laboriosam sequi beatae! Incidunt doloremque commodi ipsam adipisci! Officiis quod eum aliquam molestiae facere beatae nisi nam esse veniam delectus dolore harum suscipit, odit voluptatibus officia temporibus ducimus! Officia cumque voluptates ipsa saepe perferendis ab impedit labore, tempore, deserunt ducimus at? Doloremque ea consequatur temporibus nisi nulla! Vero laudantium quas molestiae commodi deleniti.</p>
<p class="o-editorial-layout-body">Expedita error placeat soluta odit modi. Voluptatem, illum neque inventore hic voluptatum, esse optio recusandae numquam nostrum magni, quibusdam animi earum tenetur sit eius perspiciatis. Quas quidem atque id? Est architecto exercitationem, voluptate sint beatae repudiandae vitae neque nostrum, ut tempora eligendi blanditiis saepe praesentium delectus omnis molestiae quibusdam aliquam rerum deleniti molestias quas, maiores consequatur reprehenderit! Dolores libero tempore incidunt dolorem distinctio! Sapiente, repellat, dicta reiciendis velit in illo ducimus ullam, laborum nam obcaecati mollitia nulla. Saepe ipsa fugit fuga non nihil praesentium commodi dolorem nesciunt, ducimus quod deleniti aperiam vel distinctio cumque dicta dolor pariatur enim dolore illum.</p>

<h3 class="o-editorial-layout-heading-3">heading 3</h3>

<p class="o-editorial-layout-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex velit beatae saepe adipisci consectetur. Alias nesciunt aliquam saepe? Itaque ratione delectus hic dignissimos ad. Quaerat consectetur quam incidunt odit unde natus, quos recusandae quo? Cum adipisci ex rem maxime beatae quos autem magni. Dignissimos, consequuntur debitis fuga hic deserunt natus ducimus ad culpa vero? Voluptatum, similique accusamus aut, quidem nemo veniam amet est repellendus corporis dolor odio tempore placeat impedit odit officiis id quibusdam labore, reiciendis autem vero eaque quod quam fuga assumenda! Ad error unde dolorum quaerat ipsa quae odit delectus omnis illum voluptatibus. Explicabo perferendis voluptas consequuntur ea.</p>
<p class="o-editorial-layout-body">Quas dolorem harum tempora omnis veniam ut libero laboriosam fugiat accusamus cupiditate saepe accusantium error minus nam assumenda quod incidunt, obcaecati soluta consequatur impedit totam asperiores quasi optio eius? Temporibus, earum. Odit modi animi in eligendi. Dolores, quidem possimus debitis optio reiciendis, nulla corrupti animi maiores exercitationem ea temporibus at earum labore unde doloremque voluptas soluta! Autem, quasi totam rem obcaecati quae eum deleniti? Soluta praesentium velit libero voluptate. Neque adipisci sunt id sapiente sit iure autem optio exercitationem cum at hic harum rem, totam deserunt dolorum, necessitatibus natus. Sequi, consequuntur voluptates. Adipisci hic inventore dolorum laudantium ullam, aspernatur explicabo?</p>
<p class="o-editorial-layout-body">Veritatis dicta veniam odit provident rerum aperiam ipsa ducimus architecto voluptate optio, perferendis quidem beatae magnam ut est facilis, quos vitae neque facere quisquam. Culpa animi, recusandae tempore maxime incidunt molestias, dolore nulla facilis porro illo mollitia consectetur modi ex iusto exercitationem dolorem voluptates nostrum nisi fuga laboriosam sequi beatae! Incidunt doloremque commodi ipsam adipisci! Officiis quod eum aliquam molestiae facere beatae nisi nam esse veniam delectus dolore harum suscipit, odit voluptatibus officia temporibus ducimus! Officia cumque voluptates ipsa saepe perferendis ab impedit labore, tempore, deserunt ducimus at? Doloremque ea consequatur temporibus nisi nulla! Vero laudantium quas molestiae commodi deleniti.</p>

<h4 class="o-editorial-layout-heading-4">heading 4</h4>

<p class="o-editorial-layout-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex velit beatae saepe adipisci consectetur. Alias nesciunt aliquam saepe? Itaque ratione delectus hic dignissimos ad. Quaerat consectetur quam incidunt odit unde natus, quos recusandae quo? Cum adipisci ex rem maxime beatae quos autem magni. Dignissimos, consequuntur debitis fuga hic deserunt natus ducimus ad culpa vero? Voluptatum, similique accusamus aut, quidem nemo veniam amet est repellendus corporis dolor odio tempore placeat impedit odit officiis id quibusdam labore, reiciendis autem vero eaque quod quam fuga assumenda! Ad error unde dolorum quaerat ipsa quae odit delectus omnis illum voluptatibus. Explicabo perferendis voluptas consequuntur ea.</p>
<p class="o-editorial-layout-body">Quas dolorem harum tempora omnis veniam ut libero laboriosam fugiat accusamus cupiditate saepe accusantium error minus nam assumenda quod incidunt, obcaecati soluta consequatur impedit totam asperiores quasi optio eius? Temporibus, earum. Odit modi animi in eligendi. Dolores, quidem possimus debitis optio reiciendis, nulla corrupti animi maiores exercitationem ea temporibus at earum labore unde doloremque voluptas soluta! Autem, quasi totam rem obcaecati quae eum deleniti? Soluta praesentium velit libero voluptate. Neque adipisci sunt id sapiente sit iure autem optio exercitationem cum at hic harum rem, totam deserunt dolorum, necessitatibus natus. Sequi, consequuntur voluptates. Adipisci hic inventore dolorum laudantium ullam, aspernatur explicabo?</p>

<h5 class="o-editorial-layout-heading-5">heading 5</h5>

<p class="o-editorial-layout-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex velit beatae saepe adipisci consectetur. Alias nesciunt aliquam saepe? Itaque ratione delectus hic dignissimos ad. Quaerat consectetur quam incidunt odit unde natus, quos recusandae quo? Cum adipisci ex rem maxime beatae quos autem magni. Dignissimos, consequuntur debitis fuga hic deserunt natus ducimus ad culpa vero? Voluptatum, similique accusamus aut, quidem nemo veniam amet est repellendus corporis dolor odio tempore placeat impedit odit officiis id quibusdam labore, reiciendis autem vero eaque quod quam fuga assumenda! Ad error unde dolorum quaerat ipsa quae odit delectus omnis illum voluptatibus. Explicabo perferendis voluptas consequuntur ea.</p>

Wrapper

Wrapper for editorial styles. Styles all child typographic elements.

<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. Ex velit beatae saepe adipisci consectetur. Alias nesciunt aliquam saepe? Itaque ratione delectus hic dignissimos ad. Quaerat consectetur quam incidunt odit unde natus, quos recusandae quo? Cum adipisci ex rem maxime beatae quos autem magni. Dignissimos, consequuntur debitis fuga hic deserunt natus ducimus ad culpa vero? Voluptatum, similique accusamus aut, quidem nemo veniam amet est repellendus corporis dolor odio tempore placeat impedit odit officiis id quibusdam labore, reiciendis autem vero eaque quod quam fuga assumenda! Ad error unde dolorum quaerat ipsa quae odit delectus omnis illum voluptatibus. Explicabo perferendis voluptas consequuntur ea.</p>
<p>Quas dolorem harum tempora omnis veniam ut libero laboriosam fugiat accusamus cupiditate saepe accusantium error minus nam assumenda quod incidunt, obcaecati soluta consequatur impedit totam asperiores quasi optio eius? Temporibus, earum. Odit modi animi in eligendi. Dolores, quidem possimus debitis optio reiciendis, nulla corrupti animi maiores exercitationem ea temporibus at earum labore unde doloremque voluptas soluta! Autem, quasi totam rem obcaecati quae eum deleniti? Soluta praesentium velit libero voluptate. Neque adipisci sunt id sapiente sit iure autem optio exercitationem cum at hic harum rem, totam deserunt dolorum, necessitatibus natus. Sequi, consequuntur voluptates. Adipisci hic inventore dolorum laudantium ullam, aspernatur explicabo?</p>
<p>Veritatis dicta veniam odit provident rerum aperiam ipsa ducimus architecto voluptate optio, perferendis quidem beatae magnam ut est facilis, quos vitae neque facere quisquam. Culpa animi, recusandae tempore maxime incidunt molestias, dolore nulla facilis porro illo mollitia consectetur modi ex iusto exercitationem dolorem voluptates nostrum nisi fuga laboriosam sequi beatae! Incidunt doloremque commodi ipsam adipisci! Officiis quod eum aliquam molestiae facere beatae nisi nam esse veniam delectus dolore harum suscipit, odit voluptatibus officia temporibus ducimus! Officia cumque voluptates ipsa saepe perferendis ab impedit labore, tempore, deserunt ducimus at? Doloremque ea consequatur temporibus nisi nulla! Vero laudantium quas molestiae commodi deleniti.</p>

<blockquote>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi ullam vero cum voluptatem eius dolor?</p>
	<cite>Lorem, ipsum.</cite>
</blockquote>

<p><strong>Some strong copy</strong> hic voluptatum, esse optio recusandae numquam nostrum magni, quibusdam animi earum tenetur sit eius perspiciatis. Quas quidem atque id? Est architecto exercitationem, voluptate sint beatae repudiandae vitae neque nostrum, ut tempora eligendi blanditiis saepe praesentium delectus omnis molestiae quibusdam aliquam rerum deleniti molestias quas, maiores consequatur reprehenderit! Dolores libero tempore incidunt dolorem distinctio! Sapiente, repellat, dicta reiciendis velit in illo ducimus ullam, laborum nam obcaecati mollitia nulla. Saepe ipsa fugit fuga non nihil praesentium commodi dolorem nesciunt, ducimus quod deleniti aperiam vel distinctio cumque dicta dolor pariatur enim dolore illum.</p>

<h3>heading 3</h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <em>Some italic copy</em> adipisci consectetur. Alias nesciunt aliquam saepe? Itaque ratione delectus hic dignissimos ad. Quaerat consectetur quam incidunt odit unde natus, quos recusandae quo? Cum adipisci ex rem maxime beatae quos autem magni. Dignissimos, consequuntur debitis fuga hic deserunt natus ducimus ad culpa vero? Voluptatum, similique accusamus aut, quidem nemo veniam amet est repellendus corporis dolor odio tempore placeat impedit odit officiis id quibusdam labore, reiciendis autem vero eaque quod quam fuga assumenda! Ad error unde dolorum quaerat ipsa quae odit delectus omnis illum voluptatibus. Explicabo perferendis voluptas consequuntur ea.</p>

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

<p>Quas<sup>sup</sup> and dolorem<sub>sub</sub> harum tempora omnis veniam ut libero laboriosam fugiat accusamus cupiditate saepe accusantium error minus nam assumenda quod incidunt, obcaecati soluta consequatur impedit totam asperiores quasi optio eius? Temporibus, earum. Odit modi animi in eligendi. Dolores, quidem possimus debitis optio reiciendis, nulla corrupti animi maiores exercitationem ea temporibus at earum labore unde doloremque voluptas soluta! Autem, quasi totam rem obcaecati quae eum deleniti? Soluta praesentium velit libero voluptate. Neque adipisci sunt id sapiente sit iure autem optio exercitationem cum at hic harum rem, totam deserunt dolorum, necessitatibus natus. Sequi, consequuntur voluptates. Adipisci hic inventore dolorum laudantium ullam, aspernatur explicabo?</p>
<p>Veritatis dicta veniam odit provident rerum aperiam ipsa ducimus architecto voluptate optio, perferendis quidem beatae magnam ut est facilis, quos vitae neque facere quisquam. Culpa animi, recusandae tempore maxime incidunt molestias, dolore nulla facilis porro illo mollitia consectetur modi ex iusto exercitationem dolorem voluptates nostrum nisi fuga laboriosam sequi beatae! Incidunt doloremque commodi ipsam adipisci! Officiis quod eum aliquam molestiae facere beatae nisi nam esse veniam delectus dolore harum suscipit, odit voluptatibus officia temporibus ducimus! Officia cumque voluptates ipsa saepe perferendis ab impedit labore, tempore, deserunt ducimus at? Doloremque ea consequatur temporibus nisi nulla! Vero laudantium quas molestiae commodi deleniti.</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>

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

<h4>heading 4</h4>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex velit beatae saepe adipisci consectetur. Alias nesciunt aliquam saepe? Itaque ratione delectus hic dignissimos ad. Quaerat consectetur quam incidunt odit unde natus, quos recusandae quo? Cum adipisci ex rem maxime beatae quos autem magni. Dignissimos, consequuntur debitis fuga hic deserunt natus ducimus ad culpa vero? Voluptatum, similique accusamus aut, quidem nemo veniam amet est repellendus corporis dolor odio tempore placeat impedit odit officiis id quibusdam labore, reiciendis autem vero eaque quod quam fuga assumenda! Ad error unde dolorum quaerat ipsa quae odit delectus omnis illum voluptatibus. Explicabo perferendis voluptas consequuntur ea.</p>
<p>Quas dolorem harum tempora omnis veniam ut libero laboriosam fugiat accusamus cupiditate saepe accusantium error minus nam assumenda quod incidunt, obcaecati soluta consequatur impedit totam asperiores quasi optio eius? Temporibus, earum. Odit modi animi in eligendi. Dolores, quidem possimus debitis optio reiciendis, nulla corrupti animi maiores exercitationem ea temporibus at earum labore unde doloremque voluptas soluta! Autem, quasi totam rem obcaecati quae eum deleniti? Soluta praesentium velit libero voluptate. Neque adipisci sunt id sapiente sit iure autem optio exercitationem cum at hic harum rem, totam deserunt dolorum, necessitatibus natus. Sequi, consequuntur voluptates. Adipisci hic inventore dolorum laudantium ullam, aspernatur explicabo?</p>

<h5>heading 5</h5>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex velit beatae saepe adipisci consectetur. Alias nesciunt aliquam saepe? Itaque ratione delectus hic dignissimos ad. Quaerat consectetur quam incidunt odit unde natus, quos recusandae quo? Cum adipisci ex rem maxime beatae quos autem magni. Dignissimos, consequuntur debitis fuga hic deserunt natus ducimus ad culpa vero? Voluptatum, similique accusamus aut, quidem nemo veniam amet est repellendus corporis dolor odio tempore placeat impedit odit officiis id quibusdam labore, reiciendis autem vero eaque quod quam fuga assumenda! Ad error unde dolorum quaerat ipsa quae odit delectus omnis illum voluptatibus. Explicabo perferendis voluptas consequuntur ea.</p>

</div>
Support Status
active
Switch component view

GitHub Repository

Install o-editorial-layout

If using the Build Service, add o-editorial-layout@^1.3.0 to your link tag.

If running a Manual Build, run bower install --save "o-editorial-layout@^1.3.0".

Help & Support

o-editorial-layout is maintained directly by the Origami team. If you have any questions about o-editorial-layout 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