{{> shared/skip-link}}
<div class="o-layout o-layout--landing" data-o-component="o-layout">
    {{> shared/header}}
    <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 id="o-layout-main-content" 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'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>

	{{> shared/footer}}
</div>