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>
		<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-table-container o-layout__main__full-span">
			<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 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 2018.</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>

Landing Layout

Ideal for a homepage.

<div class="o-layout o-layout--landing" 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">Landing Layout</span>
				</div>
		</div>
	</header>
	<!-- end o-header-services markup -->
</div>

    <div class="o-layout__hero o-layout-typography">
        <h1>An Example Landing Page</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <!-- o-buttons included as a separate dependancy for demo purposes, see https://registry.origami.ft.com/components/o-buttons -->
        <div>
            <a class="o-layout__unstyled-element demo-button o-buttons o-buttons--big o-buttons--mono o-buttons--primary" href="#">Do A Thing</a>
            <a class="o-layout__unstyled-element demo-button o-buttons o-buttons--big o-buttons--mono o-buttons--secondary" href="#">Learn More</a>
        </div>
    </div>

	<div class="o-layout__main o-layout-typography" data-o-component="o-syntax-highlight">
        <h2>Some Information</h2>

        <div class="o-layout__overview">
            <div class="o-layout-item">
                <h3>Great For This</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere quaerat odit perferendis distinctio laboriosam id porro minus eveniet ea reiciendis minima odio eos, molestias consectetur dolor nostrum architecto ducimus deserunt.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita earum, repudiandae quia consequatur nostrum sit eligendi odio cum aliquid fuga.</p>
            </div>
            <div class="o-layout-item">
                <h3>Good For That</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, numquam!</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, dolor. Autem recusandae vero ut labore? Provident doloremque assumenda iste aperiam quis debitis natus iure aspernatur. Tenetur, suscipit. Officiis, molestias porro?</p>
            </div>
            <div class="o-layout-item">
                <h3>And More</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, voluptatibus?</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab corrupti nemo voluptate aperiam explicabo vitae cupiditate atque fugiat dignissimos, aut in blanditiis perferendis soluta natus ducimus incidunt corporis autem quia?</p>
            </div>
        </div>

        <h2>Some Choices To Make</h2>

        <div class="o-layout__overview o-layout__overview--actions">
            <div class="o-layout-item">
                <div class="o-layout-item__content">
                    <h3>Here&apos;s A Thing</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere quaerat odit perferendis distinctio laboriosam id porro minus eveniet ea reiciendis minima odio eos, molestias consectetur dolor nostrum architecto ducimus deserunt.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita earum, repudiandae quia consequatur nostrum sit eligendi odio cum aliquid fuga.</p>
                </div>
                <div class="o-layout-item__footer">
                    <!-- o-buttons included as a separate dependancy for demo purposes, see https://registry.origami.ft.com/components/o-buttons -->
                    <a class="o-layout__unstyled-element o-buttons o-buttons--big o-buttons--primary" href="#">Take An Action</a>
                </div>
            </div>
            <div class="o-layout-item">
                <div class="o-layout-item__content">
                    <h3>And Another</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, numquam!</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, dolor. Autem recusandae vero ut labore? Provident doloremque assumenda iste aperiam quis debitis natus iure aspernatur. Tenetur, suscipit. Officiis, molestias porro?</p>
                </div>
                <div class="o-layout-item__footer">
                    <!-- o-buttons included as a separate dependancy for demo purposes, see https://registry.origami.ft.com/components/o-buttons -->
                    <a class="o-layout__unstyled-element o-buttons o-buttons--big o-buttons--primary" href="#">Do A Thing</a>
                </div>
            </div>
            <div class="o-layout-item">
                <div class="o-layout-item__content">
                    <h3>And More Choices</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, voluptatibus?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab corrupti nemo voluptate aperiam explicabo vitae cupiditate atque fugiat dignissimos, aut in blanditiis perferendis soluta natus ducimus incidunt corporis autem quia?</p>
                </div>
                <div class="o-layout-item__footer">
                    <!-- o-buttons included as a separate dependancy for demo purposes, see https://registry.origami.ft.com/components/o-buttons -->
                    <a class="o-layout__unstyled-element o-buttons o-buttons--big o-buttons--primary" href="#">Do A Different Thing</a>
                </div>
            </div>
            <div class="o-layout-item">
                <div class="o-layout-item__content">
                    <h3>What To Do</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, voluptatibus?</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab corrupti nemo voluptate aperiam explicabo vitae cupiditate atque fugiat dignissimos, aut in blanditiis perferendis soluta natus ducimus incidunt corporis autem quia?</p>
                </div>
                <div class="o-layout-item__footer">
                    <!-- o-buttons included as a separate dependancy for demo purposes, see https://registry.origami.ft.com/components/o-buttons -->
                    <a class="o-layout__unstyled-element o-buttons o-buttons--big o-buttons--primary" href="#">Learn More</a>
                </div>
            </div>
	    </div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum quam iure quas velit animi sunt aliquid quos esse ea, dolor eaque non repellendus commodi id inventore quae, dicta ducimus? Similique.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sapiente.</p>
	</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 2018.</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>

Query Layout

Ideal for a search or filter page.

<div class="o-layout o-layout--query" 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">Query Layout</span>
				</div>
		</div>
	</header>
	<!-- end o-header-services markup -->
</div>

    <div class="o-layout__heading o-layout-typography">
		<h1 id="searchable-things">Searchable Things</h1>
		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur ipsa illum veniam doloremque ut laborum voluptates saepe dignissimos cupiditate eos.</p>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, sapiente.</p>
    </div>

    <div class="o-layout__query-sidebar o-layout-typography">
		<form action="/components" method="get" class="registry__form registry__container__sticky" data-o-component="o-filter-form" data-o-filter-form-browser-history="true">
			<fieldset class="o-forms">
				<label class="o-forms__label">Types</label>
				<div class="o-forms__additional-info">Filter results by type</div>
				<div class="o-forms__group">
					<input id="type-module" type="checkbox" name="module" value="true" checked class="o-forms__checkbox">
					<label for="type-module" class="o-forms__label">Modules</label>
					<input id="type-imageset" type="checkbox" name="imageset" value="true" checked class="o-forms__checkbox">
					<label for="type-imageset" class="o-forms__label">Imagesets</label>
					<input id="type-service" type="checkbox" name="service" value="true" checked class="o-forms__checkbox">
					<label for="type-service" class="o-forms__label">Services</label>
				</div>
			</fieldset>

			<fieldset class="o-forms">
				<label class="o-forms__label">Status</label>
				<div class="o-forms__additional-info">Filter results by status</div>
				<div class="o-forms__group">
					<input id="status-active" type="checkbox" name="active" value="true" checked class="o-forms__checkbox">
					<label for="status-active" class="o-forms__label">Active</label>
					<input id="status-maintained" type="checkbox" name="maintained" value="true" checked class="o-forms__checkbox">
					<label for="status-maintained" class="o-forms__label">Maintained</label>
					<input id="status-experimental" type="checkbox" name="experimental" value="true" checked class="o-forms__checkbox">
					<label for="status-experimental" class="o-forms__label">Experimental</label>
					<input id="status-deprecated" type="checkbox" name="deprecated" value="true" class="o-forms__checkbox">
					<label for="status-deprecated" class="o-forms__label">Deprecated</label>
					<input id="status-dead" type="checkbox" name="dead" value="true" class="o-forms__checkbox">
					<label for="status-dead" class="o-forms__label">Dead</label>
				</div>
			</fieldset>
		</form>
    </div>

	<div class="o-layout__main o-layout-typography" data-o-component="o-syntax-highlight">
		<h2 id="results">Results</h2>
		<ul>
			<li>
				<p>Result 1</p>
			</li>
			<li>
				<p>Result 2</p>
			</li>
			<li>
				<p>Result 3</p>
			</li>
			<li>
				<p>Result 4</p>
			</li>
			<li>
				<p>Result 5</p>
			</li>
			<li>
				<p>Result 6</p>
			</li>
		</ul>
	</div>

    <div class="o-layout__aside-sidebar o-layout-typography" data-o-component="o-syntax-highlight">
		<p>Aside Sidebar: Lorem ipsum, dolor sit amet consectetur adipisicing <code class="o-syntax-highlight--html">o-layout</code> elit. Pariatur beatae, tempora deleniti inventore impedit minus corrupti omnis esse assumenda perspiciatis?</p>
    </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 2018.</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>
Switch component view

GitHub Repository

Install o-layout

If using the Build Service, add o-layout@^3.2.0 to your script and link tags. Ensure the correct brand is set with a query parameter &brand=internal.

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

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: #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