Origami Frontend Components & Services

Demos: o-layout

Documentation Layout

Ideal for documentation.

<div class="o-layout o-layout--docs" data-o-component="o-layout">
      <div class="o-layout__header">
        <!-- start o-header-services markup: included as a separate dependency, see https://registry.origami.ft.com/components/o-header-services -->
        <header class="o-header-services" data-o-component="o-header-services">
          <div class="o-header-services__top">
            <div class="o-header-services__logo"></div>

            <div class="o-header-services__title">
              <span class="o-header-services__product-name"><a href="/">Layout Demos</a></span>
              <span class="o-header-services__product-tagline">Documentation Layout</span>
            </div>
          </div>
        </header>
        <!-- end o-header-services markup -->
      </div>

      <div class="o-layout__sidebar"></div>

      <div class="o-layout__main o-layout-typography" data-o-component="o-syntax-highlight">
        <h1 id="an-example-documentation-layout">Documentation Layout</h1>
        <h2 id="sidebar-navigation">Sidebar Navigation</h2>
        <p>
          <code class="o-syntax-highlight--html">o-layout</code> can generate a
          sidebar navigation, find out more in the
          <a href="https://registry.origami.ft.com/components/o-layout/readme">readme</a>.
        </p>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur
          sunt rerum quod repudiandae repellat fugit laboriosam eveniet harum in
          natus!
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium,
          velit? Fugiat, sed doloribus. Neque blanditiis aliquam, ab
          perspiciatis mollitia nesciunt fugit vitae soluta ducimus eos,
          aspernatur praesentium iure, aliquid modi.
        </p>
        <h2 id="asides">Asides</h2>
        <p>
          Asides are also styled and positioned witin the documentation layout.
        </p>
        <h3 id="sub-section-1">Sub Section 1</h3>
        <aside>
          <h3>Hello, I am an aside.</h3>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam,
            numquam.
          </p>
        </aside>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel amet
          minus quibusdam officia, consequuntur perspiciatis laudantium illum,
          expedita nostrum corrupti accusantium eligendi doloremque quisquam eos
          commodi temporibus tempora obcaecati. Inventore omnis blanditiis quia
          mollitia aperiam quibusdam dignissimos unde molestias ipsam.
        </p>
        <figure>
          <img alt src="https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fim.ft-static.com%2Fcontent%2Fimages%2Fa60ae24b-b87f-439c-bf1b-6e54946b4cf2.img?source=origami">
          <figcaption class="o-typography-caption">
            An example figure with caption.
          </figcaption>
        </figure>
        <h3 id="sub-section-2">Sub Section 2</h3>
        <ul>
          <li>List item 1</li>
          <li>List item 2</li>
          <li>List item 3</li>
          <li>List item 4</li>
        </ul>
        <ol>
          <li>Ordered list item 1</li>
          <li>Ordered list item 2</li>
          <li>Ordered list item 3</li>
          <li>Ordered list item 4</li>
        </ol>
        <h2 id="tables">Tables</h2>
        <p>
          The <code>table</code> element spans both columns automatically, but
          we recommend you use a responsive
          <a href="https://registry.origami.ft.com/components/o-table">o-table</a>
          and apply the <code>o-layout__main__full-span</code> class.
        </p>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam rem
          libero inventore ab nisi pariatur!
        </p>
        <blockquote>
          <p>
            Blockquote... lorem ipsum dolor sit amet, consectetur adipisicing
            elit. Omnis ea suscipit iusto perspiciatis harum, qui maxime
            necessitatibus facilis, quo natus rem accusamus autem! Magnam
            pariatur, perferendis molestiae et tenetur repudiandae.
          </p>
          <footer>by Origami Team</footer>
        </blockquote>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam
          doloribus eum maiores dolor ipsam expedita aut rerum animi soluta
          veritatis eaque quia quisquam, ratione tenetur facere iste cum quos?
          Repudiandae?
        </p>

        <div class="o-layout__main__full-span">
          <div class="o-table-container">
            <div class="o-table-overlay-wrapper">
              <div class="o-table-scroll-wrapper">
                <table class="o-table o-table--horizontal-lines o-table--responsive-overflow" data-o-component="o-table" data-o-table-responsive="overflow">
                  <thead>
                    <tr>
                      <th scope="col" role="columnheader">Fruit</th>
                      <th scope="col" role="columnheader">Genus</th>
                      <th scope="col" role="columnheader">Characteristic</th>
                      <th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">
                        Cost&#xA0;(GBP)
                      </th>
                      <th scope="col" role="columnheader" data-o-table-data-type="numeric" class="o-table__cell--numeric">
                        Cost&#xA0;(EUR)
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>Dragonfruit</td>
                      <td>Stenocereus</td>
                      <td>Juicy</td>
                      <td class="o-table__cell--numeric">3</td>
                      <td class="o-table__cell--numeric">2.72</td>
                    </tr>
                    <tr>
                      <td>Durian</td>
                      <td>Durio</td>
                      <td>Smelly</td>
                      <td class="o-table__cell--numeric">1.75</td>
                      <td class="o-table__cell--numeric">1.33</td>
                    </tr>
                    <tr>
                      <td>Naseberry</td>
                      <td>Manilkara</td>
                      <td>Chewy</td>
                      <td class="o-table__cell--numeric">2</td>
                      <td class="o-table__cell--numeric">1.85</td>
                    </tr>
                    <tr>
                      <td>Strawberry</td>
                      <td>Fragaria</td>
                      <td>Sweet</td>
                      <td class="o-table__cell--numeric">1.5</td>
                      <td class="o-table__cell--numeric">1.69</td>
                    </tr>
                    <tr>
                      <td>Apple</td>
                      <td>Malus</td>
                      <td>Crunchy</td>
                      <td class="o-table__cell--numeric">0.5</td>
                      <td class="o-table__cell--numeric">0.56</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="o-layout__footer">
        <!-- start o-footer-services markup: included as a separate dependancy, see https://registry.origami.ft.com/components/o-footer-services -->
        <footer class="o-footer-services">
          <div class="o-footer-services__container">
            <div class="o-footer-services__wrapper o-footer-services__wrapper--top">
              <a class="o-footer-services__icon-link o-footer-services__icon-link--github" href="http://github.com/financial-times/o-footer-services">View project on GitHub</a>
              <a class="o-footer-services__icon-link o-footer-services__icon-link--slack" href="https://slack.com/messages/[id]/">#slack-channel</a>
              <p class="o-footer-services__content">
                Help or advice can be found here
                <a href="mailto:an.email@someplace.com">an.email@someplace.com</a>
                and there are other places,
                <a class="o-footer-services__content--external" href="/somewhere">like this one</a>.
              </p>
            </div>
          </div>
          <div class="o-footer-services__container">
            <div class="o-footer-services__wrapper o-footer-services__wrapper--legal">
              <div class="o-footer-services__links">
                <a href="http://help.ft.com/help/legal-privacy/cookies/">Cookies</a>
                <a href="http://help.ft.com/help/legal-privacy/copyright/copyright-policy/">Copyright</a>
                <a href="http://help.ft.com/help/legal-privacy/privacy/" class="o-footer-services__bulletted-link">Privacy</a>
                <a href="http://help.ft.com/help/legal-privacy/terms-conditions">Terms &amp; Conditions</a>
              </div>
              <p>
                <span>&#xA9; THE FINANCIAL TIMES LTD 2020.</span> FT and
                &apos;Financial Times&apos; are trademarks of The Financial Times Ltd.
              </p>
            </div>
          </div>
        </footer>
        <!-- end o-footer-services markup -->
      </div>
    </div>
Status
active
Switch component view

GitHub Repository

Install o-layout

If using the Build Service, add o-layout@^5.0.1 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-layout@^5.0.1".

Help & Support

o-layout is maintained directly by the Origami team. If you have any questions about o-layout or Origami in general, we are happy to help. 😊

Slack: #origami-support
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: #origami-support
Email: origami.support@ft.com