Updated on: 15 December 2017

Office for National Statistics
  1. Home
  2. Patterns

Patterns

Ready-to-use components

Table of contents

  1. Header
  2. Navigation
  3. Global search
  4. Search on search page
  5. Tabs
  6. Intro
  7. Secondary nav
  8. Table of contents
  9. Show/hide
  10. Footer

Header

The header contains the ONS logo and secondary navigation links.

Office for National Statistics
 
  • Methodology
  • About

<div class="wrapper">
	<div class="header col-wrap">
		<div class="col col--lg-one-third col--md-one-third">
			<a href="/">
				<!--[if lte IE 8]>
					<img class="logo" src="https://cdn.ons.gov.uk/assets/images/ons-logo/v2/ons-logo.png" alt="Office for National Statistics">
				<![endif]-->
				<!--[if gte IE 9]><!-->
					<img class="logo" src="https://cdn.ons.gov.uk/assets/images/ons-logo/v2/ons-logo.svg" alt="Office for National Statistics">
				<![endif]-->
			</a>
		</div>
		<div class="col col--lg-two-thirds col--md-two-thirds print--hide">&nbsp;</div>
		<div class="secondary-nav col col--lg-two-thirds col--md-two-thirds print--hide">
			<ul class="secondary-nav__list">
				<li class="secondary-nav__item">
					<a class="secondary-nav__link" href="/methodology">Methodology</a>
				</li>
				<li class="secondary-nav__item">
					<a class="secondary-nav__link" href="/aboutus">
						About
					</a>
				</li>
			</ul>
		</nav>
	</div>
</div>

Navigation

A drop down menu that allows users to navigate through the main website categories. It is hidden behind a menu button on mobile.

  • Menu
  • Search
  • Home
  • Business, industry and trade
    • Business
    • Changes to business
    • Construction industry
  • Economy
    • Economic output and productivity
    • Environmental accounts
    • Government, public sector and taxes
  • Employment and labour market
    • People in work
    • People not in work
  • People, population and community
    • Births, deaths and marriages
    • Community
    • Crime and justice
    • Cultural identity
  • Taking part in a survey?

<div class="primary-nav print--hide">
	<nav>
		<ul class="nav--controls">
			<li class="nav--controls__item">
				<a href="#nav-primary" id="menu-toggle" aria-controls="nav-primary" class="nav--controls__menu">
					<span class="nav--controls__text">Menu</span>
				</a>
			</li>
			<li class="nav--controls__item ">
				<a href="#nav-search" id="search-toggle" aria-controls="nav-search" class="nav--controls__search">
					<span class="nav--controls__text">Search</span>
				</a>
			</li>
		</ul>
		<div class="wrapper nav-main--hidden" id="nav-primary">
			<ul class="primary-nav__list">
				<li class="primary-nav__item js-nav hide--mobile old-ie--display-block"><a class="primary-nav__link col col--md-7 col--lg-9" href="/">Home</a></li>
				<li class="primary-nav__item js-nav js-expandable ">
					<a class="primary-nav__link col col--md-8 col--lg-10" href="/businessindustryandtrade" aria-haspopup="true">Business, industry and trade</a>
					<ul class="primary-nav__child-list col col--md-16 col--lg-20 js-expandable__content js-nav-hidden jsEnhance" aria-expanded="false" aria-label="submenu">
						<li class="primary-nav__child-item  js-expandable__child">
							<a class="primary-nav__child-link" tabindex="-1" href="/businessindustryandtrade/business" >Business</a>
						</li>
						<li class="primary-nav__child-item  js-expandable__child">
							<a class="primary-nav__child-link" tabindex="-1" href="/businessindustryandtrade/changestobusiness" >Changes to business</a>
						</li>
						<li class="primary-nav__child-item  js-expandable__child">
							<a class="primary-nav__child-link" tabindex="-1" href="/businessindustryandtrade/constructionindustry" >Construction industry</a>
						</li>
					</ul>
				</li>
				<li class="primary-nav__item js-nav js-expandable ">
					<a class="primary-nav__link col col--md-8 col--lg-10" href="/economy" aria-haspopup="true">Economy</a>
					<ul class="primary-nav__child-list col col--md-16 col--lg-20 js-expandable__content js-nav-hidden jsEnhance" aria-expanded="false" aria-label="submenu">
						<li class="primary-nav__child-item  js-expandable__child">
							<a class="primary-nav__child-link" tabindex="-1" href="/economy/economicoutputandproductivity" >Economic output and productivity</a>
						</li>
						<li class="primary-nav__child-item  js-expandable__child">
							<a class="primary-nav__child-link" tabindex="-1" href="/economy/environmentalaccounts" >Environmental accounts</a>
						</li>
						<li class="primary-nav__child-item  js-expandable__child">
							<a class="primary-nav__child-link" tabindex="-1" href="/economy/governmentpublicsectorandtaxes" >Government, public sector and taxes</a>
						</li>
					</ul>
				</li>
				<li class="primary-nav__item js-nav js-expandable ">
					<a class="primary-nav__link col col--md-8 col--lg-10" href="/employmentandlabourmarket" aria-haspopup="true">Employment and labour market</a>
					<ul class="primary-nav__child-list col col--md-16 col--lg-20 js-expandable__content js-nav-hidden jsEnhance" aria-expanded="false" aria-label="submenu">
						<li class="primary-nav__child-item  js-expandable__child">
							<a class="primary-nav__child-link" tabindex="-1" href="/employmentandlabourmarket/peopleinwork" >People in work</a>
						</li>
						<li class="primary-nav__child-item  js-expandable__child">
							<a class="primary-nav__child-link" tabindex="-1" href="/employmentandlabourmarket/peoplenotinwork" >People not in work</a>
						</li>
					</ul>
				</li>
				<li class="primary-nav__item js-nav js-expandable ">
					<a class="primary-nav__link col col--md-8 col--lg-10" href="/peoplepopulationandcommunity" aria-haspopup="true">People, population and community</a>
					<ul class="primary-nav__child-list col col--md-16 col--lg-20 js-expandable__content js-nav-hidden jsEnhance" aria-expanded="false" aria-label="submenu">
						<li class="primary-nav__child-item  js-expandable__child">
							<a class="primary-nav__child-link" tabindex="-1" href="/peoplepopulationandcommunity/birthsdeathsandmarriages" >Births, deaths and marriages</a>
						</li>
						<li class="primary-nav__child-item  js-expandable__child">
							<a class="primary-nav__child-link" tabindex="-1" href="/peoplepopulationandcommunity/community" >Community</a>
						</li>
						<li class="primary-nav__child-item  js-expandable__child">
							<a class="primary-nav__child-link" tabindex="-1" href="/peoplepopulationandcommunity/crimeandjustice" >Crime and justice</a>
						</li>
						<li class="primary-nav__child-item  js-expandable__child">
							<a class="primary-nav__child-link" tabindex="-1" href="/peoplepopulationandcommunity/culturalidentity" >Cultural identity</a>
						</li>
					</ul>
				</li>
				<li class="primary-nav__item  js-nav">
					<a class="primary-nav__link  col col--md-8 col--lg-10" href="/surveys">
						Taking part in a survey?
					</a>
				</li>
			</ul>
		</div>
	</nav>
</div>

Global search

Site wide search bar that appears on most pages across the website. It is hidden behind a search button on mobile.


<div class="search nav-search--hidden print--hide" id="searchBar">
	<div class="wrapper" role="search">
		<form class="col-wrap search__form" action="/search">
			<label class="search__label col col--md-23 col--lg-24" for="nav-search">
				Search for a keyword(s) or time series ID
			</label>
			<input type="search" autocomplete="off" class="search__input col col--md-21 col--lg-32" id="nav-search" name="q" value="">
			<button type="submit" class="search__button col--md-3 col--lg-3" id="nav-search-submit">
				<span class="visuallyhidden">Search</span>
				<span class="icon icon-search--light"></span>
			</button>
		</form>
	</div>
</div>

Search on search page

A larger search box that appears on the search results page.

Search our website


<div class="search search--results-page print--hide" id="searchBar">
	<div class="wrapper">
		<form class="col-wrap search__form" action="/search">
			<h1>Search our website</h1>
			<label class="font-size--16 block" for="nav-search">Keyword(s) or time series ID</label>
			<input type="search" autocomplete="off" class="search__input search__input--results-page col col--md-29 col--lg-29" id="nav-search" name="q" value="">
			<button type="submit" class="search__button search__button--results-page col--md-3 col--lg-3" id="nav-search-submit">
				<span class="visuallyhidden">Search</span>
				<span class="icon icon-search--light"></span>
			</button>
		</form>
	</div>
</div>

Tabs

Tabs that allow users to quickly filter search results by content type.

  • All results (3,869)
  • Data (3,715)
  • Publications (110)

<div class="background--ship-grey padding-top-md--1">
    <nav class="tabs--js">
        <ul class="list--neutral flush">
            <li class="tab__item width-sm--6">
                <span class="tab__link tab__link--active">All results (3,869)</span>
            </li>
            <li class="tab__item width-sm--6">
                <a href="#" class="tab__link">
                    Data (3,715)
                </a>
            </li>
            <li class="tab__item width-sm--6">
                <a href="#" class="tab__link">
                    Publications (110)
                </a>
            </li>
        </ul>
    </nav>
</div>

Intro

Appears at the top of article and dataset pages, it contains important content such as the heading 1 and introductory paragraph.

  1. Home
  2. Economy

Economy

UK economic activity covering production, distribution, consumption and trade of goods and services. Individuals, businesses, organisations and governments all affect the development of the economy.


<div class="page-intro background--gallery">
	<div class="wrapper">
		<div class="col-wrap">
			<div class="col">
				<nav>
				    <div class="breadcrumb print--hide">
                        <ol class="breadcrumb__list">
                            <li class="breadcrumb__item">
                                <a class="breadcrumb__link" href="/">
                                    Home
                                </a>
                            </li>
                            <li class="breadcrumb__item">
                                Economy
                            </li>
                        </ol>
                    </div>
				</nav>
				<div class="col col--md-47 col--lg-48">
					<h1 class="page-intro__title ">
						Economy
					</h1>
					<p class="page-intro__content">
						UK economic activity covering production, distribution, consumption and trade of goods and services. Individuals, businesses, organisations and governments all affect the development of the economy.
					</p>
				</div>
			</div>
		</div>
	</div>
</div>

Secondary nav

Appears just below the page intro. Allows users to navigate around the current page and it's related content.

On this page:

  • Datasets
  • Publications
  • Methodology

View all content related to this topic:

  • All data
  • All publications

<div class="nav-secondary-wrap">
    <div class="wrapper">
        <div class="col-wrap">
            <nav>
                <div class="nav-secondary nav-secondary--border-right-lg col col--lg-half">
                    <h2 class="nav-secondary__title">On this page:</h2>
                    <ul class="nav-secondary__list">
                        <li class="nav-secondary__item"><a href="#datasets" class="js-scroll">Datasets</a></li>
                        <li class="nav-secondary__item"><a href="#publications" class="js-scroll">Publications</a></li>
                        <li class="nav-secondary__item"><a href="#methodology" class="js-scroll">Methodology</a></li>
                    </ul>
                </div>
            </nav>
            <nav>
                <div class="nav-secondary col col--lg-half">
                    <h2 class="nav-secondary__title">View all content related to this topic:</h2>
                    <ul class="nav-secondary__list">
                        <li class="nav-secondary__item"><a href="/economy/environmentalaccounts/datalist">All data</a></li>
                        <li class="nav-secondary__item"><a href="/economy/environmentalaccounts/publications">All publications</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</div>

Table of contents

Javascript enhanced

A list of links that allows a user to jump to different sections of the content.

Table of contents

  1. Main points
  2. Understanding GDP
  3. Headline GDP components and GDP per head
  4. Historical context
  5. GDP analysed by output categories, chained volume measures, tables B1 and B
  6. GDP analysed by expenditure categories, chained volume measures, table C

<div class="table-of-contents js-sticky-toc print--avoid-break">
	<h2 class="table-of-contents__title">Table of contents</h2>
	<ol id="toc" class="table-of-contents__list">
		<li class="table-of-contents__item">
			<a href="#m" class="js-scroll">
			    Main points
			</a>
		</li>
		<li class="table-of-contents__item">
			<a href="#" class="js-scroll">
			    Understanding GDP
			</a>
		</li>
		<li class="table-of-contents__item">
			<a href="#" class="js-scroll">
			    Headline GDP components and GDP per head
			</a>
		</li>
		<li class="table-of-contents__item">
			<a href="#" class="js-scroll">
			    Historical context
			</a>
		</li>
		<li class="table-of-contents__item">
			<a href="#" class="js-scroll">
			    GDP analysed by output categories, chained volume measures, tables B1 and B
			</a>
		</li>
		<li class="table-of-contents__item">
			<a href="#" class="js-scroll">
			    GDP analysed by expenditure categories, chained volume measures, table C
			</a>
		</li>
	</ol>
</div>

Show/hide

Javascript enhanced

To use the show/hide functionality without styling only use the classes prefixed with 'js'. The other classes add styling, such as spacing to the title and arrows to show whether it is expanded or not.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas pharetra nunc in aliquam. Duis malesuada euismod libero at ultricies. Morbi elementum sodales magna, quis fermentum est lobortis ut. Nulla eu pellentesque purus, et molestie dolor. Nulla ex augue, tincidunt in molestie sodales, pharetra et nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. In faucibus consectetur nulla, auctor facilisis libero rutrum non.


<div class="js-show-hide">
    <div class="show-hide show-hide--light">
        <div class="js-show-hide__title">
            <h2 class="show-hide__title">
                Lorem Ipsum
            </h2>
        </div>
        <div class="js-show-hide__content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas pharetra nunc in aliquam. Duis malesuada euismod libero at ultricies. Morbi elementum sodales magna, quis fermentum est lobortis ut. Nulla eu pellentesque purus, et molestie dolor. Nulla ex augue, tincidunt in molestie sodales, pharetra et nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. In faucibus consectetur nulla, auctor facilisis libero rutrum non.</p>
        </div>
    </div>
</div>

Footer

Appears at the bottom of each page. Links to help, about and contact information.

Footer links

Help

  • Accessibility
  • Cookies and privacy
  • Terms and conditions

About ONS

  • What we do
  • Careers
  • Contact us
  • News
  • Freedom of Information

Connect with us

  • Twitter
  • Facebook
  • LinkedIn
  • Email alerts
OGL

All content is available under the Open Government Licence v3.0 , except where otherwise stated


<footer class="print--hide">
    <h2 class="visuallyhidden">Footer links</h2>
        <div class="footer">
            <div class="wrapper">
                <nav>
                    <div class="footer-nav col-wrap">
                        <div class="col col--lg-one-third col--md-one-third">
                            <h3 class="footer-nav__heading">Help</h3>
                            <ul class="footer-nav__list">
                                <li class="footer-nav__item">
                                    <a href="/help/accessibility">Accessibility</a>
                                </li>
                                <li class="footer-nav__item">
                                    <a href="/help/cookiesandprivacy">Cookies and privacy</a>
                                </li>
                                <li class="footer-nav__item">
                                    <a href="/help/termsandconditions">Terms and conditions</a>
                                </li>
                            </ul>
                        </div>
                        <div class="col col--lg-one-third col--md-one-third">
                            <h3 class="footer-nav__heading">About ONS</h3>
                            <ul class="footer-nav__list">
                                <li class="footer-nav__item">
                                    <a href="/aboutus/whatwedo">What we do</a>
                                </li>
                                <li class="footer-nav__item">
                                    <a href="/aboutus/careers">Careers</a>
                                </li>
                                <li class="footer-nav__item">
                                    <a href="/aboutus/contactus">Contact us</a>
                                </li>
                                <li class="footer-nav__item">
                                    <a href="/news">News</a>
                                </li>
                                <li class="footer-nav__item">
                                    <a href="/aboutus/transparencyandgovernance/freedomofinformationfoi">Freedom of Information</a>
                                </li>
                            </ul>
                        </div>
                        <div class="col col--lg-one-third col--md-one-third">
                            <h3 class="footer-nav__heading">Connect with us</h3>
                            <ul class="footer-nav__list">
                                <li class="footer-nav__item">
                                    <a href="https://twitter.com/ONS" class="icon--hide">Twitter</a>
                                </li>
                                <li class="footer-nav__item">
                                    <a href="https://www.facebook.com/ONS" class="icon--hide">Facebook</a>
                                </li>
                                <li class="footer-nav__item">
                                    <a href="https://www.linkedin.com/company/office-for-national-statistics" class="icon--hide">LinkedIn</a>
                                </li>
                                <li class="footer-nav__item">
                                    <a href="https://public.govdelivery.com/accounts/UKONS/subscribers/new" class="icon--hide">Email alerts</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
            <div class="wrapper">
                <div class="footer-license">
                    <img class="footer-license__img" alt="OGL" width="60" src="https://www.ons.gov.uk/img/ogl.png">
                    <p class="footer-license__text margin-left-sm--0">
                        All content is available under the <a class="icon--hide" href="http://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/">Open Government Licence v3.0</a> <span class="icon icon-external--light-small"></span>, except where otherwise stated
                </p>
            </div>
        </div>
    </div>
 </footer>

Related

  • ONS website
  • Sixteens on GitHub