Components

Groups of elements that together make components.

Global header



<!--logo-->
<div class="wrapper wrapper--header">
    <nav class="header wrapper col-wrap">
        <div class="col col--fluid-4 main-logo" >
            <a href="#">
                <img src="../assets/img/logo.png"
                     alt="Food Standards Agency">
            </a>
        </div>
        <div class="col col--fluid-7">
            <div class="col-wrap">
                <form action="" class="search">
                    <div class="col col--fluid-2"></div>
                    <div class="col col--fluid-11 col--xs-3">
                        <input class="input-text" type="text">
                    </div>
                    <div class="col col--fluid-2 col--xs-1">
                        <input class="btn btn--search" type="submit" value="">
                        </input>
                    </div>
                </form>
            </div>
        </div>
        <nav class="language-nav col col--fluid-4 margin-top-xs--4">
            <ul class="language-nav__list">
                <li class="language-nav__item">English</li>
                <li class="language-nav__item">
                    <a class="language-nav__link" href="#">Welsh</a>
                </li>
            </ul>
        </nav>
    </nav>
</div>
<div class="wrapper mega-menu-wrap">
    <nav class="primary-nav">
        <ul class="primary-nav__list">
            <li class="primary-nav__item">
                <a class="primary-nav__link primary-nav__link--home" href="#"><span class="icon icon-home--white-small"></span></a>
            </li>
            <li class="primary-nav__item mega-menu__l1">
                <a class="primary-nav__link" href="#">News & Updates</a>
                <div class="mega-menu">
                    <div class="col-wrap">
                        <div class="col col--fluid-4 mega-menu__popular">
                            <section>
                                <h1 class="font-size--h3">Popular</h1>
                                <ul class="no-list-style__list">
                                    <li><a href="#">Aliquam in luctus </a></li>
                                    <li><a href="#">Pellentesque</a></li>
                                    <li><a href="#">Nunc</a></li>
                                    <li><a href="#">Laoreet diam</a></li>
                                    <li><a href="#">Lorem ipsum</a></li>
                                    <li><a href="#">Vestibulum commodo elit mi</a></li>
                                </ul>
                            </section>
                        </div>
                        <div class="col col--fluid-11 padding-left--0">
                            <section>
                                <div class="col-wrap">
                                    <div class="col col--fluid-10">
                                        <h1>News & updates</h1>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum
                                            ullamcorper sem, vitae molestie est luctus a. Pellentesque erat orci,
                                            bibendum at ullamcorper et, ultricies ac quam.</p>
                                    </div>
                                </div>
                                <div class="col">
                                    <hr>
                                </div>
                                <div class="col-wrap">
                                    <div class="col col--fluid-3">
                                        <h2 class="font-size--h6">Lorem ipsum</h2>
                                        <ul class="no-list-style__list">
                                            <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
                                            </li>
                                            <li><a href="#">Vestibulum commodo elit mi</a></li>
                                            <li><a href="#">Aliquam in luctus </a></li>
                                            <li><a href="#">Pellentesque</a></li>
                                            <li><a href="#">Nunc laoreet diam felis</a></li>
                                        </ul>
                                        <h2 class="font-size--h6">Lorem ipsum</h2>
                                        <ul class="no-list-style__list">
                                            <li><a href="#">Aliquam in luctus </a></li>
                                            <li><a href="#">Pellentesque</a></li>
                                            <li><a href="#">Nunc laoreet diam felis</a></li>
                                        </ul>
                                    </div>
                                    <div class="col col--fluid-3">
                                        <h2 class="font-size--h6">Morbi quam</h2>
                                        <ul class="no-list-style__list">
                                            <li><a href="#">Consectetur adipiscing elit</a></li>
                                            <li><a href="#">Commodo elit mi</a></li>
                                            <li><a href="#">Luctus </a></li>
                                            <li><a href="#">Pellentesque</a></li>
                                            <li><a href="#">Nunc laoreet diam</a></li>
                                            <li><a href="#">Lorem ipsum</a></li>
                                            <li><a href="#">Vestibulum commodo elit mi</a></li>
                                            <li><a href="#">Aliquam in luctus </a></li>
                                            <li><a href="#">Pellentesque</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </li>
            <li class="primary-nav__item mega-menu__l1">
                <a class="primary-nav__link" href="#" aria-haspopup="true">Business & Industry</a>
                <div class="mega-menu">
                    <div class="col-wrap">
                        <div class="col col--fluid-4 mega-menu__popular">
                            <section>
                                <h1 class="font-size--h3">Popular</h1>
                                <ul class="no-list-style__list">
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                </ul>
                            </section>
                        </div>
                        <div class="col col--fluid-11 padding-left--0">
                            <section>
                                <div class="col-wrap">
                                    <div class="col col--fluid-10">
                                        <h1>Business & Industry</h1>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum
                                            ullamcorper sem, vitae molestie est luctus a. Pellentesque erat orci,
                                            bibendum at ullamcorper et, ultricies ac quam.</p>
                                    </div>
                                </div>
                                <div class="col">
                                    <hr>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </li>
            <li class="primary-nav__item mega-menu__l1">
                <a class="primary-nav__link" href="#" aria-haspopup="true">Enforcement & Regulation</a>
                <div class="mega-menu">
                    <div class="col-wrap">
                        <div class="col col--fluid-4 mega-menu__popular">
                            <section>
                                <h1 class="font-size--h3">Popular</h1>
                                <ul class="no-list-style__list">
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                </ul>
                            </section>
                        </div>
                        <div class="col col--fluid-11 padding-left--0">
                            <section>
                                <div class="col-wrap">
                                    <div class="col col--fluid-10">
                                        <h1>Enforcement & Regulation</h1>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum
                                            ullamcorper sem, vitae molestie est luctus a. Pellentesque erat orci,
                                            bibendum at ullamcorper et, ultricies ac quam.</p>
                                    </div>
                                </div>
                                <div class="col">
                                    <hr>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </li>
            <li class="primary-nav__item mega-menu__l1">
                <a class="primary-nav__link" href="#" aria-haspopup="true">Science & Policy</a>
                <div class="mega-menu">
                    <div class="col-wrap">
                        <div class="col col--fluid-4 mega-menu__popular">
                            <section>
                                <h1 class="font-size--h3">Popular</h1>
                                <ul class="no-list-style__list">
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                </ul>
                            </section>
                        </div>
                        <div class="col col--fluid-11 padding-left--0">
                            <section>
                                <div class="col-wrap">
                                    <div class="col col--fluid-10">
                                        <h1>Science & Policy</h1>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum
                                            ullamcorper sem, vitae molestie est luctus a. Pellentesque erat orci,
                                            bibendum at ullamcorper et, ultricies ac quam.</p>
                                    </div>
                                </div>
                                <div class="col">
                                    <hr>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </li>
            <li class="primary-nav__item mega-menu__l1">
                <a class="primary-nav__link" href="#" aria-haspopup="true">About us</a>
                <div class="mega-menu">
                    <div class="col-wrap">
                        <div class="col col--fluid-4 mega-menu__popular">
                            <section>
                                <h1 class="font-size--h3">Popular</h1>
                                <ul class="no-list-style__list">
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                </ul>
                            </section>
                        </div>
                        <div class="col col--fluid-11 padding-left--0">
                            <section>
                                <div class="col-wrap">
                                    <div class="col col--fluid-10">
                                        <h1>About us</h1>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum
                                            ullamcorper sem, vitae molestie est luctus a. Pellentesque erat orci,
                                            bibendum at ullamcorper et, ultricies ac quam.</p>
                                    </div>
                                </div>
                                <div class="col">
                                    <hr>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </li>
            <li class="primary-nav__item mega-menu__l1">
                <a class="primary-nav__link primary-nav__link--fhr" href="#" aria-haspopup="true">Food Hygiene
                    Ratings</a>
                <div class="mega-menu">
                    <div class="col-wrap">
                        <div class="col col--fluid-4 mega-menu__popular">
                            <section>
                                <h1 class="font-size--h3">Popular</h1>
                                <ul class="no-list-style__list">
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                </ul>
                            </section>
                        </div>
                        <div class="col col--fluid-11 padding-left--0">
                            <section>
                                <div class="col-wrap">
                                    <div class="col col--fluid-10">
                                        <h1>Food Hygiene Ratings</h1>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum
                                            ullamcorper sem, vitae molestie est luctus a. Pellentesque erat orci,
                                            bibendum at ullamcorper et, ultricies ac quam.</p>
                                    </div>
                                </div>
                                <div class="col">
                                    <hr>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </nav>
</div>
<script type="text/javascript">
    initMegamenu();
    function initMegamenu() {
        $(".mega-menu__l1").hover(
                function () {
                    $(this).addClass("primary-nav__item--hover");
                    $(".mega-menu", this).first().addClass("mega-menu--hover");
                    $("<div class=\"mega-menu-active-bg\"></div>").insertAfter("body");
                }, function () {
                    $(this).removeClass("primary-nav__item--hover");
                    $(".mega-menu", this).first().removeClass("mega-menu--hover");
                    $(".mega-menu-active-bg").remove();
                }
        );
    }
</script>

Jumbotron


Picture takes the whole width.

DON'T WASH RAW CHICKEN

Share

DON'T WASH RAW CHICKEN

Share

<!--jumbotron-->
<div class="wrapper border-pic--transparent jumbotron" style="background: url('https://fsa-pl-ui.herokuapp.com/assets/img/fsa-home-main.jpg') no-repeat">
    <div class="col-wrap border--white-transparent hide--xs">
        <div class="col col--fluid-5 background--white-transp padding-bottom--3 margin-bottom--2">
            <h2 class="campaign-separator-dotted">DON'T WASH RAW CHICKEN</h2>
            <button class="btn btn--action-alt">Read more</button>
            <div class="jumbo-share">Share <span class="icon icon-share--black-small"></span></div>
        </div>
    </div>
</div>
<!--for mobile-->
<div class="wrapper">
    <div class="col-wrap hide--not-xs">
        <div class="col col--fluid-1 background--white margin-bottom--1">
            <h2 class="campaign-separator-dotted">DON'T WASH RAW CHICKEN</h2>
            <button class="btn btn--action-alt">Read more</button>
            <div class="jumbo-share">Share <span class="icon icon-share--black-small"></span></div>
        </div>
    </div>
</div>
<!--end for mobile-->

Three column tiles


Three columns tiles


<!--3 col div-->
<div class="wrapper home--campaign">
    <div class="col-wrap">
        <div class="col-wrap">
            <div class="col col--fluid-5 home-campaign-tile home-campaign-tile--img-first separator-right-solid">
                <article>
                    <img src="../assets/img/fsa-home-1of3.jpg" class="img-responsive">
                    <h4 class="js-equal-height">
                        <a class="text-colour" href="">Are you allergy aware?</a>
                    </h4>
                    <a href="#"><span class="icon icon-share--black-small"></span></a>
                </article>
            </div>
            <div class="col col--fluid-5 home-campaign-tile home-campaign-tile--img-first separator-right-solid">
                <article>
                    <img src="../assets/img/fsa-home-2of3.jpg" class="img-responsive">
                    <h4 class="js-equal-height">
                        <a class="text-colour" href="">Our Food Future</a>
                    </h4>
                    <a href="#"><span class="icon icon-share--black-small"></span></a>
                </article>
            </div>
            <div class="col col--fluid-5 home-campaign-tile home-campaign-tile--img-first">
                <article>
                    <img src="../assets/img/fsa-home-3of3.jpg" class="img-responsive">
                    <h4 class="js-equal-height">
                        <a class="text-colour" href="">Food hygiene for businesses</a>
                    </h4>
                    <a href="#"><span class="icon icon-share--black-small"></span></a>
                </article>
            </div>
        </div>
    </div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../assets/js/helpers.js"></script>

Five column tiles


Five columns tiles


<!--5 col div - News & Alerts-->
<div class="wrapper home--news">
    <div class="col-wrap">
        <div class="col col--fluid-3 home-news-tile home-news-tile--img-first">
            <h2 class="margin-top--0"><a class="text-colour" href="">Latest news & alerts</a></h2>
        </div>
        <div class="col col--fluid-3 home-news-tile home-news-tile--img-first separator-right-solid">
            <article class="js-equal-height">
                <img src="../assets/img/fsa-news-hero1.png" alt="" class="img-responsive">
                <h4>
                    <a class="text-colour" href="https://www.food.gov.uk/news-updates/news/2016/15103/quarter-of-people-with-food-allergies-suffer-reactions-when-eating-out">
                    Quarter of people with food allergies suffer reactions when eating out</a>
                </h4>
                <footer>
                    <p class="font-size--small font-size--bold">28 April 2016</p>
                </footer>
                <a href="#"><span class="icon icon-share--black-small"></span></a>
            </article>
        </div>
        <div class="col col--fluid-3 home-news-tile home-news-tile--img-first separator-right-solid">
            <article class="js-equal-height">
                <img src="../assets/img/allergyallert.png" alt="" class="img-responsive">
                <h4>
                    <a class="text-colour" href="http://www.food.gov.uk/news-updates/news/2016/15101/ginco-recalls-chocolate-coated-honeycomb">
                    Ginco recalls its Chocolate Coated Honeycomb</a>
                </h4>
                <footer>
                    <p class="font-size--small font-size--bold">25 April 2016 </p>
                </footer>
                <a href="#"><span class="icon icon-share--black-small"></span></a>
            </article>
        </div>
        <div class="col col--fluid-3 home-news-tile home-news-tile--img-first separator-right-solid">
            <article class="js-equal-height">
                <img src="../assets/img/productrecall.png" alt="" class="img-responsive">
                <h4>
                    <a class="text-colour" href="http://www.food.gov.uk/news-updates/news/2016/15083/argo-poultry-recalls-whole-cooked-chickens">
                    Argo Poultry recalls Whole Cooked Chickens</a>
                </h4>
                <footer>
                    <p class="font-size--small font-size--bold">20 April 2016</p>
                </footer>
                <a href="#"><span class="icon icon-share--black-small"></span></a>
            </article>
        </div>
        <div class="col col--fluid-3 home-news-tile home-news-tile--img-first">
            <article class="js-equal-height">
                <img src="../assets/img/fsa-news-hero1.png" alt="" class="img-responsive">
                <h4>
                    <a class="text-colour" href="https://www.food.gov.uk/news-updates/news/2016/15103/quarter-of-people-with-food-allergies-suffer-reactions-when-eating-out">
                    Quarter of people with food allergies suffer reactions when eating out</a>
                </h4>
                <footer>
                    <p class="font-size--small font-size--bold">28 April 2016</p>
                </footer>
                <a href="#"><span class="icon icon-share--black-small"></span></a>
            </article>
        </div>
    </div>
</div>

Content title


Title with borders

This is specific for <Nation> (16px Roboto Bold)

This is an h1 and in the main heading of this page (48px font size and line height, 10 cols wide)


<!--title-->
<div class="wrapper content--title">
    <div class="col-wrap">
        <div class="col col--fluid-offset-3 col--fluid-10 padding-top--2 padding-bottom--1">
            <span class="regional">This is specific for &lt;Nation&gt; (16px Roboto Bold)</span>
        </div>
        <div class="col col--fluid-offset-3 col--fluid-10 padding-bottom--8">
            <h1>This is an h1 and in the main heading of this page (48px font size and line height, 10 cols wide)
            </h1>
        </div>
    </div>
</div>

Content explanation


Important text with background color

This is the introductory paragraph of the page. We do not recommend a big paragraph but rather a short introduction to enable the user to quickly ascertain that they are in the correct place. This design pattern can also be used elsewhere for stand out copy (24px Roboto regular, 32px line height, 10 cols wide)


<!--explanation-->
<div class="wrapper content--explanation">
    <div class="col-wrap">
        <div class="col col--fluid-offset-3 col--fluid-10">
            <p>This is the introductory paragraph of the page. We do not recommend a big paragraph but rather a short introduction to enable the user to quickly ascertain that they are in the correct place. This design pattern can also be used elsewhere for stand out copy (24px Roboto regular, 32px line height, 10 cols wide)
            </p>
        </div>
    </div>
</div>

Content intro



<!--intro-->
<div class="wrapper content--intro" id="sidebar-start">
    <div class="col-wrap">
        <div class="wrapper">
            <!--fixed sidebar menu-->
            <div class="col col--fluid-3 padding-top--6" id="sidebar-width">
                <div class="content--tile-signup" id="sidebar">
                    <p>Last updated:</p>
                    <p class="font-size--bold">28/04/2016</p>
                    <div class="share">
                        <p>Share</p>
                        <span style="display: inline-block">
                            <span class="icon icon-linkedin--black-small"></span>
                            <span style="font-size:20px; font-weight: 100; padding: 0 5px;"> | </span>
                            <span class="icon icon-google--black-small"></span>
                            <span style="font-size:20px; font-weight: 100; padding: 0 5px;"> | </span>
                            <span class="icon icon-twitter--black-small"></span>
                            <span style="font-size:20px; font-weight: 100; padding: 0 5px;"> | </span>
                            <span class="icon icon-facebook--black-small"></span>
                            <span style="font-size:20px; font-weight: 100; padding: 0 5px;"> | </span>
                            <span class="icon icon-share--black-small"></span>
                        </span>
                    </div>
                    <div class="font-size--small">
                        <button class="btn btn--content">Sign up for
                            news and alerts
                        </button>
                    </div>
                </div>
            </div>
            <div class="col col--fluid-sm-12 col--fluid-10 padding-top--6">
                <img src="../assets/img/fsa-news-hero1.png" alt="" class="img-responsive">
            </div>
        </div>
    </div>
</div>

Content body


The survey found one in four has suffered a reaction while eating out in a restaurant or cafe since new allergen labelling legislation came in a year ago. It also found that nearly one in five (19%) of those allergic reactions resulted in a hospital visit.

The EU Food Information for Consumers (FIC) legislation came into force in December 2014, and means that food businesses have to make information on 14 allergens available to consumers. This ranges from the most common allergens, such as peanuts and gluten, to less well known triggers for allergic reactions such as mustard and celery. Around 2 million people in the UK suffer from allergies, including 2% of adults and 8% of children.


<!--content-->
<div class="wrapper content">
    <div class="col-wrap">
        <div class="col col--fluid-offset-3 col--fluid-8">
            <p>The survey found one in four has suffered a reaction while eating out in a restaurant or cafe since
                new allergen labelling legislation came in a year ago. It also found that nearly one in five (19%) of
                those allergic reactions resulted in a hospital visit.
            </p>
            <p>The EU Food Information for Consumers (FIC) legislation came into force in December 2014, and means
                that food businesses have to make information on 14 allergens available to consumers. This ranges from
                the most common allergens, such as peanuts and gluten, to less well known triggers for allergic
                reactions such as mustard and celery. Around 2 million people in the UK suffer from allergies, including 2% of
                adults and 8% of children.
            </p>
        </div>
    </div>
</div>

Content quote


'This is a quote, use it anywhere on the page in context. (48px Roboto thin italic, 56px line height, 10 cols wide)'

Quote source (16px Roboto regular)


<!--quote-->
<div class="wrapper content--quote">
    <div class="col-wrap">
        <div class="col col--fluid-offset-3 col--fluid-sm-12 col--fluid-10">
            <p>'This is a quote, use it anywhere on the page in context. (48px Roboto thin
                italic, 56px line height, 10 cols wide)'</p>
            <p class="source">Quote source (16px Roboto regular)</p>
        </div>
    </div>
</div>

Content download


Pdf download


<div class="wrapper">
    <div class="col-wrap">
        <div class="style-download">
            <div class="separator-download pdf">
                <span><a href="https://www.food.gov.uk/sites/default/files/eating-out-with-a-food-allergy.pdf">Eating out
                    with a food allergy </a>(376.58 KB)</span>
            </div>
        </div>
        </div>
    </div>
</div>