1. Layout

Layout container Complete

Constrains content and layout to a sane width on wide viewports

Layout container orc-l-container
Layout container med cap orc-l-container orc-l-container--med-cap
  • 

    <div class="orc-l-container">
  <!-- 'fpo' stands for 'for placement only'. Replace the 'fpo-block' div element with your own markup-->
  <div class="fpo-block">Layout Container</div>
</div>
<!-- end orc-l-container -->
    

  • 

    <div class="orc-l-container orc-l-container--med-cap">
  <!-- 'fpo' stands for 'for placement only'. Replace the 'fpo-block' div element with your own markup-->
  <div class="fpo-block">Layout Container Med Cap</div>
</div>
<!-- end orc-l-container -->

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.