1. Components
  2. Blocks and cards

Hero In Progress

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

Usage description.

When to consider an alternative

Alternative usage.

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

  • Version: 0.3
  • Last Updated: April 27, 2017
  • Owner: Jane Doe
Discuss this component