Section Header

Section headers display a full-width banner around a heading to clearly denote the section of a page and what bigger section of page navigation it belongs to. They offer an additional link to link to the section of the site. They work best when listing a number of stories or related content to a section, with the link going to the section of the site that content belongs to.

This component has a UO Edit Suite template for easy use on Drupal Sites: How to use this template

Examples and Code

Select exampleDefault

Open Full Example

<a class="section-header palette-bg-uo-green" href="/news/academics-and-research/">
  <h2 class="section-header__title">Academics &amp; Research</h2>
  <span class="section-header__link">All Stories</span>
</a>

Guidance

Usage Guidance

• Use for headers that group content from a section of the site: Section headers are designed to present a linked title to a section of a site, with content related to that section beneath it.
• Use background palette colors: Background palette colors are useful for varying the style of section headers when there are multiple sections on a page.
• Don’t use for regular in-page headers

Accessibility Guidance

• Use Correct Heading Levels: The title uses an H2 by default, ensure the correct heading level is set for your content.

Elements

Element	Description	Usage	Required	Multiple
Title	The header title	Use to describe the section	Yes	No
Link	A section link	Link to the section on the website	No	No