Style Guide Menu

Components


Large — 72px

Co-op

Small — 36px

<div class="row">
    <div class="column all-6">
        <h4>Large &mdash; 72px</h4>
        <span class="coop-logo-large">
            <img src="/assets/images/logos/coop-logo.svg" alt="Co-op" onerror="this.onerror=null; this.src='/assets/images/logos/coopX2.png'">
        </span>
    </div>
    <div class="column all-6">
        <h4>Small &mdash; 36px</h4>
        <span class="coop-logo">
            <img src="/assets/images/logos/coop-logo.svg" alt="Co-op" onerror="this.onerror=null; this.src='/assets/images/logos/coopX2.png'">
        </span>
    </div>
</div>

<ul class="breadcrumbs">
    <li><a href="#">Grandparent</a></li>
    <li><a href="#">Parent</a></li>
    <li><a href="#">Child</a></li>
    <li><a href="#">Grandchild</a></li>
    <li>Current page</li>
</ul>

Pagination Back to top

<ol class="pagination">
    <li><a href="#">First <span class="visuallyhidden">page</span></a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Last <span class="visuallyhidden">page</span></a></li>
</ol>

Alerts Back to top

Alerts are used to display success and error messages, as well as important/time-sensitive information, usually at the top of the page.

A default information message.

This is used as a prompt.

Important, stand-out information.

This is an error.

This is an error with some bullets so a user can correct the fields.

This is a success message.

<div class="message">
    <p>A default information message.</p>
</div>
<div class="message message-prompt">
    <p>This is used as a prompt.</p>
</div>
<div class="message message-info">
    <p>Important, stand-out information.</p>
</div>
<div class="message message-error">
    <p>This is an error.</p>
</div>
<div class="message message-error">
    <p>This is an error with some bullets so a user can correct the fields.</p>
    <ul>
        <li>Enter your <a href="#">email address</a></li>
        <li>Enter a <a href="#">password</a></li>
    </ul>
</div>
<div class="message message-success">
    <p>This is a success message.</p>
</div>

Panels Back to top

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, rem!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, totam?

<div class="boxed">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, rem!</p>
</div>
<div class="panel-grey">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, totam?</p>
</div>

Tabs Back to top

Note: the Tabs component requires the Tabs JS module from the Toolkit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat odio ullam similique, cumque reprehenderit illum consectetur officiis deserunt est natus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam id totam voluptas excepturi nam libero pariatur dolorem est.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facere assumenda expedita illum quod provident, saepe perspiciatis libero eos, quibusdam ipsum id accusantium.

<div class="tabs">
    <ul class="tabs-nav" role="tablist">
        <li><a href="#panel1">Tab 1</a></li>
        <li><a href="#panel2">Tab 2</a></li>
        <li><a href="#panel3">Tab 3</a></li>
    </ul>
    <div class="tabs-content">
        <div class="tab-panel" id="panel1" role="tabpanel">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat odio ullam similique, cumque reprehenderit illum consectetur officiis deserunt est natus.</p>
        </div>
        <div class="tab-panel" id="panel2" role="tabpanel">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam id totam voluptas excepturi nam libero pariatur dolorem est.</p>
        </div>
        <div class="tab-panel" id="panel3" role="tabpanel">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facere assumenda expedita illum quod provident, saepe perspiciatis libero eos, quibusdam ipsum id accusantium.</p>
        </div>
    </div>
</div>

Toggles Back to top

Note: the Toggles component requires the Toggles JS module from the Toolkit.

Toggle title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec facilisis nunc. Donec lacus mi, tincidunt et tempus at, dignissim eget ex. Sed viverra, ex id posuere vulputate, erat neque porttitor orci, eu dapibus dolor nisi blandit libero. Nunc at lorem at diam bibendum ultrices eget sit amet nibh.

<a href="#toggle-1" class="toggle-trigger" role="button" data-toggle>Toggle title</a>
<div id="toggle-1" class="toggle-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec facilisis nunc. Donec lacus mi, tincidunt et tempus at, dignissim eget ex. Sed viverra, ex id posuere vulputate, erat neque porttitor orci, eu dapibus dolor nisi blandit libero. Nunc at lorem at diam bibendum ultrices eget sit amet nibh.</p>
</div>

Accordion Back to top

Note: the Accordion component requires the Toggles JS module from the Toolkit.

An Accordion component is effectively a set of Toggles wrapped in a div.accordion container.

Accordion Section #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, provident! Magnam, repudiandae! Fugit.

Accordion Section #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus esse incidunt asperiores quae aliquam magnam cum dolore totam sit neque numquam, culpa, quos reiciendis doloremque distinctio voluptatum architecto temporibus atque expedita! Magni.

Accordion Section #3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, inventore. Beatae atque veritatis est aliquam, aut quam, deleniti temporibus voluptatum quibusdam eveniet distinctio, perferendis quae enim laborum quis hic. Nisi recusandae at hic magnam ullam, rerum eius unde eveniet iste natus? Ullam et, veniam sint.

<div class="accordion">
    <a class="toggle-trigger" role="button" href="#accordion-1" data-toggle>Accordion Section #1</a>
    <div id="accordion-1" class="toggle-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, provident! Magnam, repudiandae! Fugit.</p>
    </div>

    <a class="toggle-trigger" role="button" href="#accordion-2" data-toggle>Accordion Section #2</a>
    <div id="accordion-2" class="toggle-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus esse incidunt asperiores quae aliquam magnam cum dolore totam sit neque numquam, culpa, quos reiciendis doloremque distinctio voluptatum architecto temporibus atque expedita! Magni.</p>
    </div>

    <a class="toggle-trigger" role="button" href="#accordion-3" data-toggle>Accordion Section #3</a>
    <div id="accordion-3" class="toggle-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, inventore. Beatae atque veritatis est aliquam, aut quam, deleniti temporibus voluptatum quibusdam eveniet distinctio, perferendis quae enim laborum quis hic. Nisi recusandae at hic magnam ullam, rerum eius unde eveniet iste natus? Ullam et, veniam sint.</p>
    </div>
</div>