1. Components
  2. Text

Subsection header

Text that is slightly smaller than a section header to indicate a subsection on a page.

Default subsection header orc-c-subsection-header

Text that is slightly smaller than a section header to indicate a subsection on a page.

  • 

    <div class="orc-c-subsection-header">

  <div class="orc-c-subsection-header__top">
    <h3 class="orc-c-subsection-header__title">Heading ipsum dolor sit (39 characters)</h3>
  </div>


</div>
<!--end orc-c-subsection-header-->

Usage

When to use

When the content in a section has several elements to it, or if it’s getting long and needs to be broken up for the reader’s benefit.

When to consider an alternative

If the content isn’t really prose-based, a table or split passage list can help get information across more quickly than long sections and subsections of text.

Class Name Description 
orc-c-subsection-header
Required

Apply to subsection header’s containing HTML element. This helps layout the subsection header title and excerpt.

 
orc-c-subsection-header__top
Required

Apply to the subsection header’s top section that contains the title and optional button.

 
orc-c-subsection-header__title
Required

Apply to h3 tag within orc-c-subsection-header__top. This headlines the subsection.

 
orc-c-btn

Apply to button tag. This is placed next to the subsection title if there is enough room.

 
orc-c-subsection-header__excerpt

Apply to div below orc-c-subsection-header__top. This contains an excerpt of text as a description of the subsection.