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