1. Layout

3-up grid Complete

Three equal-width columns

3-up grid orc-l-grid orc-l-grid--3up
3-up grid no gap orc-l-grid orc-l-grid--3up orc-l-grid--no-gap

3-up grid description

3-up grid small gap orc-l-grid orc-l-grid--3up orc-l-grid--small-gap

3-up grid description

3-up grid med gap orc-l-grid orc-l-grid--3up orc-l-grid--med-gap

3-up grid description

  • 
    
    <div class="orc-l-grid orc-l-grid--3up ">
    
      <div class="orc-l-grid__item">
        <!-- 'fpo' stands for 'for placement only'. Replace the 'fpo-block' div element with your own markup-->
        <div class="fpo-block">1</div>
      </div>
      <!-- end orc-l-grid__item -->
    
      <div class="orc-l-grid__item">
        <!-- 'fpo' stands for 'for placement only'. Replace the 'fpo-block' div element with your own markup-->
        <div class="fpo-block fpo-block--dark">2</div>
      </div>
      <!-- end orc-l-grid__item -->
    
      <div class="orc-l-grid__item">
        <!-- 'fpo' stands for 'for placement only'. Replace the 'fpo-block' div element with your own markup-->
        <div class="fpo-block">3</div>
      </div>
      <!-- end orc-l-grid__item -->
    
    </div>
    <!-- end orc-l-grid -->
  • 
    
    <div class="orc-l-grid orc-l-grid--3up orc-l-grid--no-gap">
    
      <div class="orc-l-grid__item">
        <!-- 'fpo' stands for 'for placement only'. Replace the 'fpo-block' div element with your own markup-->
        <div class="fpo-block">1</div>
      </div>
      <!-- end orc-l-grid__item -->
    
      <div class="orc-l-grid__item">
        <!-- 'fpo' stands for 'for placement only'. Replace the 'fpo-block' div element with your own markup-->
        <div class="fpo-block fpo-block--dark">2</div>
      </div>
      <!-- end orc-l-grid__item -->
    
      <div class="orc-l-grid__item">
        <!-- 'fpo' stands for 'for placement only'. Replace the 'fpo-block' div element with your own markup-->
        <div class="fpo-block">3</div>
      </div>
      <!-- end orc-l-grid__item -->
    
    </div>
    <!-- end orc-l-grid -->
  • 
    
    <div class="orc-l-grid orc-l-grid--3up orc-l-grid--small-gap">
    
      <div class="orc-l-grid__item">
        <!-- 'fpo' stands for 'for placement only'. Replace the 'fpo-block' div element with your own markup-->
        <div class="fpo-block">1</div>
      </div>
      <!-- end orc-l-grid__item -->
    
      <div class="orc-l-grid__item">
        <!-- 'fpo' stands for 'for placement only'. Replace the 'fpo-block' div element with your own markup-->
        <div class="fpo-block fpo-block--dark">2</div>
      </div>
      <!-- end orc-l-grid__item -->
    
      <div class="orc-l-grid__item">
        <!-- 'fpo' stands for 'for placement only'. Replace the 'fpo-block' div element with your own markup-->
        <div class="fpo-block">3</div>
      </div>
      <!-- end orc-l-grid__item -->
    
    </div>
    <!-- end orc-l-grid -->
  • 
    
    <div class="orc-l-grid orc-l-grid--3up orc-l-grid--med-gap">
    
      <div class="orc-l-grid__item">
        <!-- 'fpo' stands for 'for placement only'. Replace the 'fpo-block' div element with your own markup-->
        <div class="fpo-block">1</div>
      </div>
      <!-- end orc-l-grid__item -->
    
      <div class="orc-l-grid__item">
        <!-- 'fpo' stands for 'for placement only'. Replace the 'fpo-block' div element with your own markup-->
        <div class="fpo-block fpo-block--dark">2</div>
      </div>
      <!-- end orc-l-grid__item -->
    
      <div class="orc-l-grid__item">
        <!-- 'fpo' stands for 'for placement only'. Replace the 'fpo-block' div element with your own markup-->
        <div class="fpo-block">3</div>
      </div>
      <!-- end orc-l-grid__item -->
    
    </div>
    <!-- end orc-l-grid -->

Usage

When to use

Usage description.

When to consider an alternative

Alternative usage.

Class Name Description
c-hero
Required

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.