6.1 #permalink Hero section

Toggle example guides Toggle HTML markup

A full-width element with an image, a title, and a subtitle suitable for the top of pages. The image itself is set by the accompanying javascript call so as not to pollute the css file (it also lets us do a bit of responsive optimization)

Example
Markup
 <div class="hero img-overlay">
  <div class="hero-text layout_centerBoth">
   <h1 class="hero-title ruleBottom col_whiteText text_allCaps"><a class="col_inherit" href="/aboutus">About Us</a></h1>
  </div>
 </div>
<script type="text/javascript">
   deferred.push(["gg.img.loadBg","hero","/img/banners/hero_join","jpg"]);
</script>
Source: modules/06_images/hero.less, line 5