Navigation lists
Grid List
A grid navigation list is used on a T2 landing page and shows the links, with summary text, in a tiled format.
<section class="navigation-lists-block">
<div class="container">
<ul class="row g-0 gx-lg-4 articles list-unstyled">
<li class="article article col-12 col-md-4">
<div class="has-mb-5 has-mr-5">
<header>
<h3>
<a
href="/bins-recycling/bins-and-recycling-collection-dates"
>Bins and recycling collection dates</a
>
</h3>
</header>
<p>
See when the next waste collection from your home will
be.
</p>
</div>
</li>
<li class="article col-12 col-md-4">
<div class="has-mb-5 has-mr-5">
<header>
<h3>
<a
href="/bins-recycling/order-new-bins-boxes-and-lids"
>Order new bins, boxes and lids</a
>
</h3>
</header>
<p>
Get replacements for lost or damaged bins, boxes, bags
or lids and how to cancel an order.
</p>
</div>
</li>
<li class="article col-12 col-md-4">
<div class="has-mb-5">
<header>
<h3>
<a
href="/bins-recycling/missed-bin-or-recycling-collection"
>Missed bin or recycling collection</a
>
</h3>
</header>
<p>
Report a missed collection, when we’ll return to collect
and how to help make sure we don’t miss your
collections.
</p>
</div>
</li>
</ul>
</div>
</section>
Stacked list
A stacked navigation list is used on a T3 page which requires paragraphs of text as well as a navigation list. It shows the links, with summary text, in a list format.
<section class="navigation-lists-block">
<div class="container">
<ul class="g-0 gx-lg-4 articles list-unstyled">
<li class="article article col-12">
<div class="has-mb-5 has-mr-5">
<header>
<h3>
<a
href="/bins-recycling/bins-and-recycling-collection-dates"
>Bins and recycling collection dates</a
>
</h3>
</header>
<p>
See when the next waste collection from your home will
be.
</p>
</div>
</li>
<li class="article col-12">
<div class="has-mb-5 has-mr-5">
<header>
<h3>
<a
href="/bins-recycling/order-new-bins-boxes-and-lids"
>Order new bins, boxes and lids</a
>
</h3>
</header>
<p>
Get replacements for lost or damaged bins, boxes, bags
or lids and how to cancel an order.
</p>
</div>
</li>
<li class="article col-12">
<div class="has-mb-5">
<header>
<h3>
<a
href="/bins-recycling/missed-bin-or-recycling-collection"
>Missed bin or recycling collection</a
>
</h3>
</header>
<p>
Report a missed collection, when we’ll return to collect
and how to help make sure we don’t miss your
collections.
</p>
</div>
</li>
</ul>
</div>
</section>