Pistachio the front end framework and pattern library for graze.com

contents:


    Footer

    We have a standardised footer for use across all graze websites. While the content can vary based on context, this footer should always be used on a graze website and in fact, you can see one at the bottom of this very page unless something has gone very wrong.

    the footer

    The footer itself can contain different content depending on context, but text should use the relevant meta classes such as .meta and link-meta. Here's an example:

    <footer class="page-footer">
        <div class="container">
            <ul class="page-footer__social">
                <li>
                    <a class="link-meta" href="https://www.facebook.com/grazeuk/" title="like us on Facebook">
                        <span class="fa fa-facebook-square fa-2x"></span>
                        <span class="sr-only">like us on Facebook</span>
                    </a>
                </li>
                <li>
                    <a class="link-meta" href="https://twitter.com/grazedotcom" title="follow us on Twitter">
                        <span class="fa fa-twitter-square fa-2x"></span>
                        <span class="sr-only">follow us on Twitter</span>
                    </a>
                </li>
                <li>
                    <a class="link-meta" href="https://www.instagram.com/grazedotcom/" title="follow us on Instagram">
                        <span class="fa fa-instagram fa-2x"></span>
                        <span class="sr-only">follow us on Instagram</span>
                    </a>
                </li>
                <li>
                    <a class="link-meta" href="http://blog.graze.com/" title="graze tumblr blog">
                        <span class="fa fa-tumblr-square fa-2x"></span>
                        <span class="sr-only">follow us on Tumblr</span>
                    </a>
                </li>
                <li>
                    <a class="link-meta" href="https://www.pinterest.com/grazedotcom/" title="graze Pinterest">
                        <span class="fa fa-pinterest-square fa-2x"></span>
                        <span class="sr-only">follow us on Pinterest</span>
                    </a>
                </li>
            </ul>
            <ul class="page-footer__primary">
                <li><a class="link-meta" href="https://www.facebook.com/grazeuk/" title="like us on Facebook">
                    about us
                </a></li>
                <li><a class="link-meta" href="https://twitter.com/grazedotcom" title="follow us on Twitter">
                    health
                </a></li>
                <li><a class="link-meta" href="https://www.instagram.com/grazedotcom/" title="follow us on Instagram">
                    jobs
                </a></li>
                <li><a class="link-meta" href="https://www.linkedin.com/company/769920" title="follow us on LinkedIn">
                    office snacks
                </a></li>
                <li><a class="link-meta" href="http://blog.graze.com/" title="graze tumblr blog">
                    in stores
                </a></li>
                <li><a class="link-meta" href="http://tech.graze.com" title="graze tech blog">
                    help
                </a></li>
                <li><a class="link-meta" href="http://tech.graze.com" title="graze tech blog">
                    get in touch
                </a></li>
            </ul>
            <ul class="page-footer__secondary">
                <li class="nav--dropdown nav--dropdown-inline" data-p-module="dropDown">
                    <div class="nav__dropdown button--dropdown">
                        <img src="/images/flag-uk.svg" height="15px"> <small class="link-meta">UK</small>
                        <div class="nav__dropdown__menu nav__dropdown__menu--wide">
                            <a href="#0" class="link-nowrap">
                                <small><img src="/images/flag-us.svg" height="15px"> USA</small>
                            </a>
                        </div>
                    </div>
                </li>
                <li>
                    <a class="link-meta" href="https://www.facebook.com/grazeuk/" title="like us on Facebook">
                        <small>terms</small>
                    </a>
                </li>
                <li>
                    <a class="link-meta" href="https://twitter.com/grazedotcom" title="follow us on Twitter">
                        <small>privacy</small>
                    </a>
                </li>
                <li class="meta pull-right-xs">
                    <small>© 2016 nature delivered ltd</small>
                </li>
            </ul>
        </div>
    </footer>