Header
Description about the header file...
<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
Description about the header file...
<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
Description about the header file...
<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
Description about the header file...
<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
Description about the page intro file...
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
JSA 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
JSTo 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>