Updated on: 11 April 2016

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...


<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

Description about the secondary nav file...


<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

JS

Description about the page intro file...


<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

JS

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>