1. Components
  2. Blocks and cards

Hero

Large-format unit to promote content with a high-impact image

Default hero c-hero

Default hero that has no gradient overlay

Blue tint hero c-hero c-hero--blue-tint

Hero with a blue gradient overlay

Red tinted hero c-hero c-hero--red-tint

Hero with a red gradient overlay

  • 
    
    <div class="c-hero " style="background-image: url(https:&#x2F;&#x2F;placeholdit.imgix.net&#x2F;~text?txtsize&#x3D;50&amp;txt&#x3D;1280%C3%97720&amp;w&#x3D;1280&amp;h&#x3D;720);">
    
      <div class="c-hero__body">
    
        <h1 class="c-hero__title">This is the hero</h1>
        <p class="c-hero__desc">This is the hero description that will describe the contents of the hero</p>
        <button class="c-btn ">
    
        <div class="c-btn__inner">
    
    
                Button
    
        </div><!--end c-btn__inner-->
    
    </button>
        <!-- end c-btn -->
    
    
      </div>
      <!-- end c-hero__body -->
    
    </div>
    <!-- end c-hero -->
    THIS IS ANGULAR CODE
    THIS IS REACT CODE
  • 
    
    <div class="c-hero c-hero--blue-tint" style="background-image: url(https:&#x2F;&#x2F;placeholdit.imgix.net&#x2F;~text?txtsize&#x3D;50&amp;txt&#x3D;1280%C3%97720&amp;w&#x3D;1280&amp;h&#x3D;720);">
    
      <div class="c-hero__body">
    
        <h1 class="c-hero__title">This is the hero</h1>
        <p class="c-hero__desc">This is the hero description that will describe the contents of the hero</p>
        <button class="c-btn c-hero--blue-tint">
    
        <div class="c-btn__inner">
    
    
                Button
    
        </div><!--end c-btn__inner-->
    
    </button>
        <!-- end c-btn -->
    
    
      </div>
      <!-- end c-hero__body -->
    
    </div>
    <!-- end c-hero -->
    THIS IS ANGULAR CODE
    THIS IS REACT CODE
  • 
    
    <div class="c-hero c-hero--red-tint" style="background-image: url(https:&#x2F;&#x2F;placeholdit.imgix.net&#x2F;~text?txtsize&#x3D;50&amp;txt&#x3D;1280%C3%97720&amp;w&#x3D;1280&amp;h&#x3D;720);">
    
      <div class="c-hero__body">
    
        <h1 class="c-hero__title">This is the hero</h1>
        <p class="c-hero__desc">This is the hero description that will describe the contents of the hero</p>
        <button class="c-btn c-hero--red-tint">
    
        <div class="c-btn__inner">
    
    
                Button
    
        </div><!--end c-btn__inner-->
    
    </button>
        <!-- end c-btn -->
    
    
      </div>
      <!-- end c-hero__body -->
    
    </div>
    <!-- end c-hero -->
    THIS IS ANGULAR CODE
    THIS IS REACT CODE

Usage

When to use

Use this pattern like this. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

When to consider alternatives

Use this pattern like this. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accessibility considerations

Use this pattern like this. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn more

Class Name Description
c-hero

Apply to the hero block’s containing HTML element. This class sets up the background-image handling and text color for the unit. The c-hero element should have just one immediate child, the c-hero__body element. Note, too, that the unit’s hero image should be applied as a background image to this c-hero element.

c-hero--bare

Add to the c-hero element to remove the default gradient overlay from the hero image.

c-hero--tinted

Add to the c-hero element to replace the default gradient overlay with a solid, uniform tint.

c-hero__body

Apply to the container for the card body, which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card’s background gradient.

c-hero__title

Apply to the card’s heading inside the card body. The recommended element for this class is <h1>.

c-hero__desc

Apply to the card’s description text inside the card body. The recommended element for this class is <p>.

Fine print

Discuss this component