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>