Skip to main content

Section Headers

Version: 0.9.0
Edit

This component is widely used on websites that do not have visible breadcrumb navigation to help the user go back to a section landing page as they delve deeper within the content. Examples of this usage are on within an academic program on a department site.

The text of the section title is linked on a solid background. The block is overlaid on an image or background pattern at the top of a page.

Section Header

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/section-headers.scss#L13

placeholder
Section Header Title 
<!-- section header -->
<div class="o-media-overlay u-space-inset-stack u-space-inset-stack-zero@md u-space-stack-tight">
  <div class="o-media-overlay__media">
    <img class="o-media-overlay__image" src="https://picsum.photos/2560/853" alt="placeholder" />
  </div>
  <div class="o-media-overlay__content c-sec-header u-align-self-end u-align-self-start@md u-justify-self-start">
    <a class="c-sec-header__link" href="#">Section Header Title</a>
  </div>
</div>

Section Header with Background

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/section-headers.scss#L71

Section Header Title 
<!-- section header with background -->
<!-- Update .u-bg class to change background -->
<div class="o-grid u-bg-pies u-space-inset-stack-lg u-space-inset-stack-zero@md">
   <div class="o-grid__item o-grid__item--c1-sp2 c-sec-header u-justify-self-start">
      <a class="c-sec-header__link" href="#">Section Header Title</a>
   </div>
</div>