Navigation
Step header
Report missed collection : Step 1 of 5
Your recent collections
When to use
Use at the top of transaction pages to show the user where they are in the transaction process.
<header class="step-header">
<h1 class="step-header__title">
Report missed collection
<span class="step-header__title__steps">
<span class="step-header__title__steps__seperator">:</span>
Step 1 of 3
</span>
</h1>
<h2 class="step-header__subtitle">
Your recent collections
</h2>
</header>List
-
Landlord services
Including repairs, maintenance, tenancy issues, caretaking and neighbours
-
Rehousing
Including repairs, maintenance, tenancy issues, caretaking and neighbours
-
Housing benefits and rent
Including repairs, maintenance, tenancy issues, caretaking and neighbours
-
Accessible homes
Including repairs, maintenance, tenancy issues, caretaking and neighbours
-
Private housing
Including repairs, maintenance, tenancy issues, caretaking and neighbours
When to use
Use for in page navigation on deeper pages where the options may need more explanation as at this level you are getting into more finer detail. It should generally come after the tiles (below)
<ul class="list">
<li class="list__item">
<h3 class="list__item__title">
<a href="#">
Landlord services
</a>
</h3>
<p class="list__item__copy">
Including repairs, maintenance, tenancy issues, caretaking and neighbours
</p>
</li>
...
</ul>Tiles
-
Housing
-
Bins, recycling and litter
-
Parks, libraries and leisure
-
Council tax
-
Crime and antisocial behaviour
-
Transport, roads and parking
When to use
Use for in page navigation on landing pages, or where there are a lot of options that you want to bring into a single page view. These should be on the first page of a website topic.
<ul class="tiled js--matchHeight">
<li class="tiled__item">
<h3 class="tiled__item__title">
<a href="#">
Housing
</a>
</h3>
</li>
...
</ul>Backlink
When to use
Use on pages where users have to go a few levels deep to find what they need. This will allow them to get back to higher level pages incase they went into the wrong section.
<p>
<span class="light"><</span> <a href="#"> Complaints and feedback </a>
</p>Tabs
Lorem ipsum tab 1 dolor sit amet, consectetur adipiscing elit.
Lorem ipsum tab 2 dolor sit amet, consectetur adipiscing elit.
When to use
Use tabs to alternate between views within the same context. The label text in the tabs should be as short as possible and consist of no more than 1 or 2 words so that they don't create spacing issues on mobile.
<div class="tabs js--tabs">
<ul class="tabs__list">
<li><a href="#tab-101"> Tab 1 </a></li>
...
</ul>
<div class="tabs__tab" id="tab-101">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
...
</div>