district base

6.3.3 #Organisms.banners.jumbotron Jumbotron

Jumbotron that displays on the homepage.

Examples

Default styling

Welcome to District. This is our default website theme.

Learn More

.jumbotron--content-right

Content right

Welcome to District. This is our default website theme.

Learn More

.jumbotron--full-image

Full Image

Welcome to District. This is our default website theme.

Learn More

.jumbotron--content-right.jumbotron--full-image

Content right and full image

Welcome to District. This is our default website theme.

Learn More

Markup

<div class="jumbotron [modifier class]">
 <div class="jumbotron__image js-img-to-bg" style="background-image: url(https://picsum.photos/1200/500?random=1);">
  <img src="https://picsum.photos/1200/500?random=1" width="1200" height="500" class="image-style-jumbotron" style="visibility: hidden;">
 </div>
 <div class="jumbotron__container container">
   <div class="jumbotron__container-content">
     <div class="jumbotron__title">
     Welcome to District. This is our default website theme.</div>
     <a href="/services" class="button button--light">Learn More</a>
   </div>
 </div>
</div>

Source: docroot/themes/contrib/district_base/styles/scss/components/_jumbotron.scss, line 1