1. Components
  2. Headers and footers

Vertical header

Vertical sidebar navigation on wide screens and hamburger navigation on small screens.

Vertical header c-header c-header--vertical

Vertical header

  • 
    
    <a href="#" class="c-card ">
    
      <div class="c-card__header">
        Card header
      </div>
    
      <div class="c-card__body">
    
        <h2 class="c-card__title">
          <span class="c-card__title-text">Card Heading</span>
          <svg class="c-icon c-card__icon">
    				<use href="..&#x2F;..&#x2F;icons.svg#chevron-right"></use>
    			</svg>
        </h2>
        <!-- end c-card__title -->
    
        <p class="c-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
    
      </div>
      <!-- end c-card__body -->
    
      <div class="c-card__footer">
        Card footer
      </div>
      <!-- end c-card__footer -->
    
    </a>
    <!-- end c-card -->
    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