1. Components
  2. Text

Section header

Enlargened text that headlines a section of the page.

Default section header orc-c-section-header

Enlargened text that headlines a section of the page.

Section header align left orc-c-section-header--align-left

Left-justifies the section header and all content within it.

Section header condensed orc-c-section-header--condensed

Condenses the font family of the section title.

Lined section header orc-c-section-header--lined

Adds a line to the left and right of the section header.

Padded section header orc-c-section-header--padded

Adds more top and bottom padding to the section header.

White section header orc-c-section-header--white

Changes the section header text to white.

  • 

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


  <h2 class="orc-c-section__title">Heading ipsum dolor sit (39 characters)</h2>




  <div class="orc-c-btn-group ">

    <button class="orc-c-btn ">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

</button>
    <!-- end orc-c-btn -->


    <button class="orc-c-btn orc-c-btn--bare">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

</button>
    <!-- end orc-c-btn -->




  </div>
  <!--end orc-c-btn-group-->




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

  • 

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


  <h2 class="orc-c-section__title">Heading ipsum dolor sit (39 characters)</h2>




  <div class="orc-c-btn-group orc-c-section__header--align-left">

    <button class="orc-c-btn orc-c-section__header--align-left">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

</button>
    <!-- end orc-c-btn -->


    <button class="orc-c-btn orc-c-btn--bare">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

</button>
    <!-- end orc-c-btn -->




  </div>
  <!--end orc-c-btn-group-->




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

  • 

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


  <h2 class="orc-c-section__title">Heading ipsum dolor sit (39 characters)</h2>




  <div class="orc-c-btn-group orc-c-section__header--condensed">

    <button class="orc-c-btn orc-c-section__header--condensed">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

</button>
    <!-- end orc-c-btn -->


    <button class="orc-c-btn orc-c-btn--bare">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

</button>
    <!-- end orc-c-btn -->




  </div>
  <!--end orc-c-btn-group-->




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

  • 

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


  <h2 class="orc-c-section__title">Heading ipsum dolor sit (39 characters)</h2>




  <div class="orc-c-btn-group orc-c-section__header--lined">

    <button class="orc-c-btn orc-c-section__header--lined">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

</button>
    <!-- end orc-c-btn -->


    <button class="orc-c-btn orc-c-btn--bare">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

</button>
    <!-- end orc-c-btn -->




  </div>
  <!--end orc-c-btn-group-->




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

  • 

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


  <h2 class="orc-c-section__title">Heading ipsum dolor sit (39 characters)</h2>




  <div class="orc-c-btn-group orc-c-section__header--padded">

    <button class="orc-c-btn orc-c-section__header--padded">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

</button>
    <!-- end orc-c-btn -->


    <button class="orc-c-btn orc-c-btn--bare">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

</button>
    <!-- end orc-c-btn -->




  </div>
  <!--end orc-c-btn-group-->




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

  • 

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


  <h2 class="orc-c-section__title">Heading ipsum dolor sit (39 characters)</h2>




  <div class="orc-c-btn-group orc-c-section__header--white">

    <button class="orc-c-btn orc-c-section__header--white">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

</button>
    <!-- end orc-c-btn -->


    <button class="orc-c-btn orc-c-btn--bare">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




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

</button>
    <!-- end orc-c-btn -->




  </div>
  <!--end orc-c-btn-group-->




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

Usage

When to use

Use this header to visually distinguish the different content on a page, and give the user a clear indication of what that section of content will cover.

When to consider an alternative

Not all content needs sections. If the content of a page is rather short, or if the content is more visually focused, the page header is all you need.

Class Name Description 
orc-c-section__header
Required

Apply to the section header’s containing HTML element. This helps format the layout of the content within the section header.

 
orc-c-section__header--align-left
Modifier

Apply in addition to orc-c-section__header to align all content within to the left.

 
orc-c-section__header--condensed
Modifier

Apply in addition to orc-c-section__header to change the font family of the section title to condensed.

 
orc-c-section__header--lined
Modifier

Apply in addition to orc-c-section__header to horizontal lines to the left and right of the section title.

 
orc-c-section__header--padded
Modifier

Apply in addition to orc-c-section__header to add more top and bottom padding to the section header.

 
orc-c-section__header--white
Modifier

Apply in addition to orc-c-section__header to change the section header text to white.

 
orc-c-section__title
Required

Apply to h2 tag to represent the title of the section header.

 
orc-c-section__subtitle

Apply optional subtitle to h3 tag below the section title to act as an subheading.

 
orc-c-section__description

Apply optional description to p tag to provide a description of the section.

 
orc-c-text-passage

Apply in addition to orc-c-section__description to provide the same styles that a text passage gives to its content. See text passage for more information about the styled content within a text passage.

 
orc-c-btn-group

Apply to div that can format multiple calls to action. See button group for more information about classes used in this component.

 
orc-c-btn

Apply to button that can be used for pagination above the section title or used within the button group below the section description for any call to actions. See button for more information about classes used in this component.

 
orc-c-horizontal-list

Optional horizontal list that can be placed below the rest of the section header content. See horizontal list for more information about classes used in this component.