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>
Status
active Origami v1
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 npm install "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