Feature navigation tiles
The feature navigation tiles are the navigation links that sit at the top of the index page like buttons. They highlight links to the most used pages, so people can quickly identify a service.
Heading has background colour with transparency
<section class="navigation-tiles-block">
<div class="container heading theme-grey-light">
<h1>Bristol City Council services</h1>
</div>
<div class="container has-pt-6 has-pb-2 theme-grey-light-teal">
code in here can be found below
</div>
</section>
<section class="navigation-tiles-block">
<div class="container heading theme-teal">
<h1>Bristol City Council services</h1>
</div>
<div class="container has-pt-6 has-pb-2 theme-teal">
code in here can be found below
</div>
</section>
Heading without background colour
<section class="navigation-tiles-block">
<div class="container heading">
<h1>Bristol City Council services</h1>
</div>
<div class="container has-pt-6 has-pb-2 theme-grey-light">
code in here can be found below
</div>
</section>
<section class="navigation-tiles-block">
Copy the correct heading code from above, with or without background.
<div class="container has-pt-6 has-pb-2 theme-teal">
<div class="row tiles-grid g-0 gx-md-4 gx-lg-4">
<div class="tile col-sm-12 col-md-4">
<a class="tile-link has-mb-4 icon-right" href="_#">
Pay online
<i class="bcc-font_right"></i>
</a>
</div>
<div class="tile col-sm-12 col-md-4">
<a class="tile-link has-mb-4 icon-right" href="_#">
Bins and recycling collection dates
<i class="bcc-font_right"></i>
</a>
</div>
<div class="tile col-sm-12 col-md-4">
<a class="tile-link has-mb-4 icon-right" href="_#">
Missed bin or recycling collection
<i class="bcc-font_right"></i>
</a>
</div>
</div>
</div>
</section>