Two column layout | Cosmopolitan Design System

Layout

Two column layout

HTML


<div class="orc-l-page-layout orc-l-page-layout--two-column">

  <div class="orc-l-page-layout__main">
    <!-- 'fpo' stands for 'for placement only'. Replace the 'fpo-block' div element with your own markup-->
    <div class="fpo-block fpo-block--dark">Main</div>
  </div>
  <!-- end orc-l-page-layout__main -->

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

</div>
<!-- end orc-l-page-layout--two-column -->

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.