1. Components
  2. Sections

Section

A generic container that identifies a major section of a page.

Section orc-c-section

A generic container that identifies a major section of a page.

Centered section orc-c-section--centered

Centers the content within the section.

Netting section orc-c-section--netting

Applies a netting background image to the top of the section.

Purple netting section orc-c-section--purple-netting

Applies a purple background, and a netting image to the top of the section

Purple section orc-c-section--purple

Applies a purple background to the section.

Split section orc-c-section--split

On larger screens, the section header responsively shifts to the left of the rest of the content.

White section orc-c-section--white

Applies a white background to the section.

  • 

    <section class="orc-c-section ">

  <div class="orc-c-section__inner orc-l-container">

    <header class="orc-c-section__header ">


      <h2 class="orc-c-section__title">Section Header</h2>






    </header>
    <!--end orc-c-section__header-->


    <div class="orc-c-section__body">
      <p>A section component is a generic container that identifies a major section of a page.</p>
    </div>
    <!--end orc-c-section__body-->

  </div>
  <!--end orc-c-section__inner-->

</section>
<!--end orc-c-section-->
    

  • 

    <section class="orc-c-section orc-c-section--centered">

  <div class="orc-c-section__inner orc-l-container">

    <header class="orc-c-section__header ">


      <h2 class="orc-c-section__title">Section Header</h2>






    </header>
    <!--end orc-c-section__header-->


    <div class="orc-c-section__body">
      <p>A section component is a generic container that identifies a major section of a page.</p>
    </div>
    <!--end orc-c-section__body-->

  </div>
  <!--end orc-c-section__inner-->

</section>
<!--end orc-c-section-->
    

  • 

    <section class="orc-c-section orc-c-section--netting">

  <div class="orc-c-section__inner orc-l-container">

    <header class="orc-c-section__header ">


      <h2 class="orc-c-section__title">Section Header</h2>






    </header>
    <!--end orc-c-section__header-->


    <div class="orc-c-section__body">
      <p>A section component is a generic container that identifies a major section of a page.</p>
    </div>
    <!--end orc-c-section__body-->

  </div>
  <!--end orc-c-section__inner-->

</section>
<!--end orc-c-section-->
    

  • 

    <section class="orc-c-section orc-c-section--purple-netting">

  <div class="orc-c-section__inner orc-l-container">

    <header class="orc-c-section__header ">


      <h2 class="orc-c-section__title">Section Header</h2>






    </header>
    <!--end orc-c-section__header-->


    <div class="orc-c-section__body">
      <p>A section component is a generic container that identifies a major section of a page.</p>
    </div>
    <!--end orc-c-section__body-->

  </div>
  <!--end orc-c-section__inner-->

</section>
<!--end orc-c-section-->
    

  • 

    <section class="orc-c-section orc-c-section--purple">

  <div class="orc-c-section__inner orc-l-container">

    <header class="orc-c-section__header ">


      <h2 class="orc-c-section__title">Section Header</h2>






    </header>
    <!--end orc-c-section__header-->


    <div class="orc-c-section__body">
      <p>A section component is a generic container that identifies a major section of a page.</p>
    </div>
    <!--end orc-c-section__body-->

  </div>
  <!--end orc-c-section__inner-->

</section>
<!--end orc-c-section-->
    

  • 

    <section class="orc-c-section orc-c-section--split">

  <div class="orc-c-section__inner orc-l-container">

    <header class="orc-c-section__header ">


      <h2 class="orc-c-section__title">Section Header</h2>






    </header>
    <!--end orc-c-section__header-->


    <div class="orc-c-section__body">
      <p>A section component is a generic container that identifies a major section of a page.</p>
    </div>
    <!--end orc-c-section__body-->

  </div>
  <!--end orc-c-section__inner-->

</section>
<!--end orc-c-section-->
    

  • 

    <section class="orc-c-section orc-c-section--white">

  <div class="orc-c-section__inner orc-l-container">

    <header class="orc-c-section__header ">


      <h2 class="orc-c-section__title">Section Header</h2>






    </header>
    <!--end orc-c-section__header-->


    <div class="orc-c-section__body">
      <p>A section component is a generic container that identifies a major section of a page.</p>
    </div>
    <!--end orc-c-section__body-->

  </div>
  <!--end orc-c-section__inner-->

</section>
<!--end orc-c-section-->

Usage

When to use

Use a section to differentiate and draw attention to prioritized content. A section can be used on a variety of page types, and is one of the most commonly used components. You’ll use a number of components (section header, text passage, lists) within a section.

When to consider an alternative

There is no real alternative, but remember that sections are flexible and can contain a number of other components to suit your content.

Class Name Description 
orc-c-section
Required

Apply to the section’s containing section tag. This contains a section inner, section header, and section body where various components and content can be inserted.

 
orc-c-section--centered
Modifier

Apply in addition to orc-c-section to center the content within the section

 
orc-c-section--netting
Modifier

Apply in addition to orc-c-section to add a netting background image to the top of the section.

 
orc-c-section--purple-netting
Modifier

Apply in addition to orc-c-section to add a purple background and netting background image to the top of the section.

 
orc-c-section--purple
Modifier

Apply in addition to orc-c-section to add a purple background color to the section.

 
orc-c-section--split
Modifier

Apply in addition to orc-c-section to place the section header to the left of the rest of the content on larger screens.

 
orc-c-section--white
Modifier

Apply in addition to orc-c-section to add a white background color to the section.

 
orc-c-section__inner
Required

Apply to div within orc-c-section to layout the section header and section body within.

 
orc-l-container
Required

Apply in addition to orc-c-section__inner to cap the width of the content within the section to line up with the rest of the content on the page.

 
orc-c-section__header
Required

Apply to header tag within orc-c-section__inner to provide the title and description of the section. See section header for more information about classes used in this component.

 
orc-c-section__body
Required

Apply to div below the section header. This contain any number of various components from the design system.