A header is essential on every page. It gives users a starting point for viewing content and is typically the first thing a screen reader picks up when scanning a page.

Each header serves as the page title, which starts the heading hierarchy that structures a site. In HTML, the page title is heading level one, or “H1.” All following headings build out that hierarchy.

For more on heading hierarchy, an important part of digital accessibility, see the Heading Block documentation.

Selecting a Header

The NC State theme offers three header options: Default, Split and Floating Box.

The appropriate header will depend on what area of the site you are currently editing. To change the header layout, select the parent header area block (hover over the current header block’s icon for easy selection of this) and click on the paintbrush icon, which will open a menu of available header layout options.

Table of Contents

All three header options allow you to toggle on a Table of Contents to increase navigability of lengthy pages creating an organized list of anchor links.

Default Header

Of the three header types, the Default will likely be the most frequently used. Most subpages will want to use the default header as it will in many cases be linked to from a homepage or top level landing page that is using either the Split or Floated Box header types. The Default is the most straightforward as it only allows for adjusting the header text and providing a subtitle. See an example below.

Split and Floating Box Headers

Both the Split and Floating Box headers are best used on homepages or the top level landing pages of specific menus. These headers are more visually eye-catching and include an image in conjunction with the heading and subtitle. These headers are great ways leverage stunning photography that can potentially lead to users further exploring a site. See examples of both headers below.

Split Header Example

Floating Box Header Example

This block is only featured in the Pro and Premium Tiers of the NC State Web Platform.

Available Settings

The Split and Floating Box headers both offer various settings to customize the header. To see the available settings, click on the Settings menu next to the blue Save button, then click on the content box. Available settings include:

• Focal point picker
  • Select which part of the image is central for different screen sizes
• Content box settings
  • Toggle on the CTA (call to action) to add a button. Toggle off to remove it
  • Change the location of the box (left or right)
• Color settings
  • Change the background color of the content box