City of Tampa Style Guide

Jumbotron 2.9

Toggle example guides Toggle HTML markup

A Jumbotron is a full width hero banner with a flexible overlay area that can support common markup. Overlay positioning options are overlay-{middle/bottom}-{left/right} an example would be overlay-middle-right. A Jumbotron turns into a card on mobile. Adding w-100 to the overlay will create a larger overlay if needed.

When to use: When you need a primary hero banner.

When not to: The overly can only support a small amount of content.

Notes: The Jumbotron does not have to be linked, instead place buttons in the overlay region.

<insert-markup>components.jumbotron-</insert-markup>
<div class="jumbotron jumbotron-dark p-0">
  <a href="#" class="td-none">
    <img src="https://picsum.photos/1330/800" alt="ALT TEXT">
    <div class="jumbotron-overlay overlay-middle-right p-3">
      <p class="display-5 mb-0">Coronavirus 2019</p>
      <p>Find out what you should know.</p>
      <div class="text-left">
        <div class="btn btn-primary">Learn About COVID-19</div>
      </div>
    </div>
  </a>
</div>
Source: src/scss/base/_jumbotron.scss, line 1