Skip to main content

Hero Space

Version: 0.9.0
Edit

Hero spaces are a communication tool to set expectations for your user. This component is widely used on website homepages and specifically designed landing pages. The component requires high quality, unique imagery that contextualizes and provides value for the user. Hero spaces also have a content block that overlays the image that includes any combination of a heading, subtext, call to action, and visual image caption.

The best hero spaces convey emotion, build trust, and engage users. If this is not your intended goal, you may frustrate your user and waste valuable screen real estate.

Hero

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/hero-spaces.scss#L16

Students in class.

Hero Title

Hero copy. Kielbasa buffalo doner fatback sirloin prosciutto dolor ex pariatur meatball magna.

Call To Action 
<!-- hero -->
<div class="c-hero o-media-overlay">
 <div class="c-hero__media o-media-overlay__media">
    <img class="o-media-overlay__image" src="https://picsum.photos/2560/1024" alt="Students in class." />
    <div class="o-media-overlay__image-overlay u-image--5x2" aria-hidden="true" focusable="false">
      <!--overlay-->
    </div>
 </div>
 <div class="c-hero__content o-media-overlay__content">
    <h1 class="c-hero__title">Hero Title</h1>
    <p class="c-hero__copy">Hero copy. Kielbasa buffalo doner fatback sirloin prosciutto dolor ex pariatur meatball magna.</p>
    <a class="c-button" href="#">Call To Action</a>
 </div>
</div>

Hero with Caption

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/hero-spaces.scss#L79

Hero Title

Hero copy. Ham bacon tempor eiusmod laboris salami sausage. Buffalo tempor chislic venison short loin rump. Elit brisket strip steak shoulder consectetur pork chop.

Call To Action

Hero caption. Ham bacon tempor eiusmod laboris salami sausage. 

<!-- hero with caption -->
<div class="c-hero o-media-overlay o-media-overlay--with-caption">
 <div class="c-hero__media o-media-overlay__media">
    <img class="o-media-overlay__image" src="https://picsum.photos/2560/1280" alt="" />
    <div class="o-media-overlay__image-overlay u-image--2x1" aria-hidden="true" focusable="false">
      <!--overlay-->
    </div>
 </div>
 <div class="c-hero__content o-media-overlay__content">
    <h2 class="c-hero__title">Hero Title</h2>
    <p class="c-hero__copy c-hero__copy--lg">Hero copy. Ham bacon tempor eiusmod laboris salami sausage. Buffalo tempor chislic venison short loin rump. Elit brisket strip steak shoulder consectetur pork chop.</p>
    <a class="c-button" href="#">Call To Action</a>
 </div>
  <div class="c-hero__caption o-media-overlay__caption">
    <p class="c-hero__copy">
      <span class="c-pseudo-icon icon-info-stroke u-space-inline-right--xxs u-vertical-align-middle" aria-hidden="true" focusable="false">
         <!-- icon -->
      </span>
      <span class="u-vertical-align-middle">Hero caption. Ham bacon tempor eiusmod laboris salami sausage.</span>
   </p>
  </div>
</div>