Style Guide Menu

Templates


Boilerplate markup Back to top

This is an example of the main layout markup used on this Style Guide. It makes full use of Internet Explorer-specific stylesheets compiled form the Toolkit.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title></title>

    <meta name="description" content="">
    <link rel="canonical" href="#">

    <!--[if lte IE 8]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <link rel="stylesheet" type="text/css" href="/assets/css/ie-lte8.css" />
    <![endif]-->
    <!--[if IE 9]><link rel="stylesheet" type="text/css" href="/assets/css/ie-9.css"><![endif]-->
    <!--[if gt IE 9]><!--><link rel="stylesheet" type="text/css" href="/assets/css/main.css"><!--<![endif]-->
</head>
<body>

    <!-- Main content goes here -->

    <script src="https://code.jquery.com/jquery-1.12.1.min.js" integrity="sha256-I1nTg78tSrZev3kjvfdM5A5Ak/blglGzlaZANLPDl3I=" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-1.12.1.min.js"><\/script>')</script>
    <script src="/assets/js/main.js"></script>
</body>
</html>

Header and navigation Back to top

Alpha

This site is being developed. Find out why. Your feedback will help us improve it.

Identifier Menu
<nav class="skip-nav">
    <ul>
        <li><a accesskey="c" href="#main" title="Skip to main content">Skip to content</a></li>
        <li><a accesskey="n" href="#navigation" title="Skip to primary navigation">Skip to navigation</a></li>
    </ul>
</nav>

<div class="top-bar">
    <div class="wrap">
        <a href="#">Become a Member</a>
    </div>
</div>

<div class="info-banner">
    <div class="wrap">
      <span class="label alpha">Alpha</span>
      <p>This site is being developed. <a href="#">Find out why.</a> Your <a href="#">feedback</a> will help us improve it.</p>
    </div>
</div>

<header class="wrap header-main">
    <a class="coop-logo" aria-label="Homepage" href="#">
        <img src="/assets/images/logos/coop-logo.svg" alt="Co-op" onerror="this.onerror=null; this.src='/assets/images/logos/coopX2.png'">
    </a>

    <a href="#" class="identifier">Identifier</a>

    <a href="#navigation-example" class="mobile-menu-toggle">
        <span class="icon icon-menu"></span><span class="mobile-menu-text">Menu</span>
    </a>
</header>

<nav id="navigation-example" class="nav-primary">
    <div class="wrap">
        <ul>
            <li><a href="#">Nav item</a></li>
            <li class="active"><a href="#">Nav item active</a></li>
            <li><a href="#">Nav dropdown item <span class="icon icon-down-arrow-button"></span></a>
                <ul>
                    <li><a href="#">Sub-nav item</a></li>
                    <li><a href="#">Sub-nav item</a></li>
                    <li><a href="#">Sub-nav item</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

The footer contains several different elements which can be included or not, as required:

  • A logo (.coop-logo)
  • Support links, useful for categorised sets of links (.support-links)
  • A set of bottom links, useful for links to legal content (.bottom-links)
  • An area for small print-type content (.legalese)

The following example contains all the above elements:

<footer class="footer-main">
    <div class="wrap footer-main-top">
        <a class="coop-logo" aria-label="Homepage" href="/">
            <img src="/assets/images/logos/coop-logo.svg" alt="Co-op" onerror="this.onerror=null; this.src='/assets/images/logos/coopX2.png'">
        </a>

        <div class="support-links">

            <div class="row">
                <div class="small-6 medium-3 column">
                    <h4 class="menu-toggle">Support links 1</h4>
                    <ul>
                        <li><a href="#">First item</a></li>
                        <li><a href="#">Second item</a></li>
                        <li><a href="#">Third item</a></li>
                    </ul>
                </div>

                <div class="small-6 medium-3 column">
                    <h4 class="menu-toggle">Support links 2</h4>
                    <ul>
                        <li><a href="#">First item</a></li>
                        <li><a href="#">Second item</a></li>
                    </ul>

                    <h4 class="menu-toggle">Support links 3</h4>
                    <ul>
                        <li><a href="#">Third item</a></li>
                        <li><a href="#">Fourth item</a></li>
                    </ul>
                </div>

                <div class="small-6 medium-3 column small-clear medium-clear-none">
                    <h4 class="menu-toggle">Support links 4</h4>
                    <ul>
                        <li><a href="#">First item</a></li>
                        <li><a href="#">Second item</a></li>
                        <li><a href="#">Third item</a></li>
                        <li><a href="#">Fourth item</a></li>
                    </ul>
                </div>

                <div class="small-6 medium-3 column">
                    <h4 class="menu-toggle visuallyhidden small-shown">Connect with us</h4>
                    <ul class="social-links">
                        <li><a href="#"><span class="visuallyhidden">Facebook</span><i class="icon icon-facebook"></i></a></li>
                        <li><a href="#"><span class="visuallyhidden">Twitter</span><i class="icon icon-twitter"></i></a></li>
                        <li><a href="#"><span class="visuallyhidden">LinkedIn</span><i class="icon icon-linkedin"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <nav class="bottom-links">
        <ul class="wrap">
            <li><a href="#">Privacy & cookies</a></li>
            <li><a href="#">Accessibility</a></li>
            <li><a href="#">Terms & conditions</a></li>
        </ul>
    </nav>

    <div class="wrap legalese">
        <p>Copyright &copy; Co-operative Group Limited. All rights reserved.</p>
    </div>
</footer>