district base

6.3.1 #Organisms.banners.hero-banner Hero Banner

Banner hero that displays on the homepage.

Examples

Default styling

.hero-banner--content-right

Content right

Welcome to District. This is our default website theme.

Learn More

.hero-banner--full-image

Full Image

.hero-banner--content-right.hero-banner--full-image

Content right and full image

Welcome to District. This is our default website theme.

Learn More

Markup

<div class="hero-banner [modifier class]">
 <div class="hero-banner__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-hero-banner" style="visibility: hidden;">
 </div>
 <div class="hero-banner__container container">
   <div class="hero-banner__container-content">
     <div class="hero-banner__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/_hero-banner.scss, line 5