Section Header

Components

What is a Section Header?

A Section Header clearly labels and organizes sections of content. Based on user feedback, Section Headers are centered to improve readability and create a balanced visual layout. They act as dividers, helping users understand the hierarchy of information and quickly scan the page.

Laptop with a section header on screen

Section Header Example

This is an example of an section header teaser on a Sand 300 Background

Step-by-Step Instructions

1. Add a Cards Grid or One Column Section

  • Click the Edit link at the top of the page.
  • Place your cursor where you want the cards.
  • Click the plus icon
  • Select Cards Grid if you want to place the section header above a CTA card or Icon Card grid.
  • Select One Column to place the Section Header above all other components.

2. Add a Section Header

  1. Add a Title
  2. (Optional) Add a teaser for supporting context.
  3. In Styles, set the header level to H2 or H3

Only Site Administrators can add background colors.

Background Colors

We recommend working with a Site Administrator to apply background colors to CTA Card Grids and standalone CTA Cards when you need them to stand out.

Note: Background colors can be applied only within One Column and Card Grid sections.

How to Apply a Background Highlight

  1. Open the Styles tab.
  2. Choose one of the approved background colors:
  • None (default)
  • Blue 100
  • Blue 300
  • Blue 500
  • Blue 700
  • Sand 300
  • Sand 500

Blue 100 Section Header Example

This is a teaser text

Blue 300 Section Header Example

This is a teaser text

Blue 500 Section Header Example

This is a teaser text.

Blue 700 Section Header Example

This is a teaser text.

Sand 300 Section Header Example

This is a teaser text.

Sand 500 Section Header Example

This is a teaser text.