Promotional tiles
Promotional tiles should be used to highlight cross-promotional content elsewhere on the website. They can be used with an image to help provide more context to the copy. Images should add value and not just be used to fill space. If an image isn't needed, try using feature navigation tiles. Promotional tiles should be used at the bottom of the page.
Make sure to add the .js snippet below to ensure that all promotional tiles stay in line, with the headers remaining the same height as their tallest sibling.
With Header title
Food delivery
Arrange a hot meals delivery service
Bristol Community Meals is a food delivery and wellbeing check service for all residents who can’t prepare food or don’t have time to cook.
Diversity
Apply to the Stepping Up programme
Stepping Up is a ground breaking and award winning diversity leadership programme.
Travel
Mass transit and public transport plans
Our vision for connecting people in Bristol with each other, jobs, retail, leisure and the surrounding area.
<section class="promotional-tiles-block">
<div class="container has-p-4">
<div class="row tiles-grid g-0 gx-md-4 gx-lg-4">
<div class="tile-container col-sm-12 col-md-4">
<header>
<h2>Food delivery</h2>
</header>
<div class="promotional-tile has-mb-6 ">
<a
target="_blank"
href="/bins-recycling/bins-and-recycling-collection-dates"
class="is-relative is-d-block has-mb-3"
>
<div class="aspect-ratio-container is-4x3 is-no-overflow">
<div class="aspect-ratio-content">
<img
class="media-cover"
src="./../assets/images/community_meals.jpg"
alt="Bristol City Council voulunteer giving out free meals to the community"
title="Bristol City Council voulunteer giving out free meals to the community"
/>
</div>
</div>
</a>
<div class="is-d-block">
<h3>
<a
target="_blank"
href="/bins-recycling/bins-and-recycling-collection-dates"
>Arrange a hot meals delivery service</a
>
</h3>
<p>
Assumenda rem in quas, sint molestiae corrupti eos labore dolores
maxime deleniti dolor, autem quasi id neque officia quaerat.
Fugiat, maiores aut!
</p>
</div>
</div>
</div>
</div>
</div>
</section>
const isMobile = window.matchMedia(
"only screen and (max-width: 760px)"
).matches;
if (!isMobile) {
const elements = document.querySelectorAll(".tile-container header");
var heights = [];
elements.forEach((e) => {
e.style.minHeight = `0px`;
heights.push(e.offsetHeight);
});
const maxHeight = Math.max(...heights);
elements.forEach((e) => {
e.style.minHeight = `${maxHeight}px`;
});
}
Without Header title
Arrange a hot meals delivery service
Bristol Community Meals is a food delivery and wellbeing check service for all residents who can’t prepare food or don’t have time to cook.
Apply to the Stepping Up programme
Stepping Up is a ground breaking and award winning diversity leadership programme.
Mass transit and public transport plans
Our vision for connecting people in Bristol with each other, jobs, retail, leisure and the surrounding area.
<section class="promotional-tiles-block">
<div class="container has-p-4">
<div class="row tiles-grid g-0 gx-md-4 gx-lg-4">
<div class="tile-container col-sm-12 col-md-4">
<div class="promotional-tile has-mb-6 ">
<a
target="_blank"
href="/bins-recycling/bins-and-recycling-collection-dates"
class="is-relative is-d-block has-mb-3"
>
<div class="aspect-ratio-container is-4x3 is-no-overflow">
<div class="aspect-ratio-content">
<img
class="media-cover"
src="./../assets/images/stepping_up.png"
alt="People from a diverse background stepping up and working together"
title="People from a diverse background stepping up and working together"
/>
</div>
</div>
</a>
<div class="is-d-block">
<h3>
<a
target="_blank"
href="/bins-recycling/bins-and-recycling-collection-dates"
>Apply to the Stepping Up programme</a
>
</h3>
<p>
Assumenda rem in quas, sint molestiae corrupti eos labore dolores
maxime deleniti dolor, autem quasi id neque officia quaerat.
Fugiat, maiores aut!
</p>
</div>
</div>
</div>
</div>
</div>
</section>