Header
The header contains the ONS logo and secondary navigation links.
<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"> </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>
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.
<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.
<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.
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>
Table of contents
Javascript enhancedA list of links that allows a user to jump to different sections of the content.
<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 enhancedTo 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.
<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>