Page Types and Page Headers
When you log in to the CMS to create a page, you'll choose between two page types and two header styles. Starting from these base templates, you'll have a large variety of flexible component options you can use to customize the layout and structure to best fit your content.
In this section:
Page Types
There are two main page types used in the website: routing pages and detail pages. Choose one based on your page's goals and the type of content you have for it.
Routing Pages
Routing pages are intended for top-level pages with no right sidebar. They are composed of a series of short chunks of introductory content linking users off to more details. They can be used to highlight featured programs and resources, stories, and top user tasks.
Detail Pages
Detail pages are intended for interior pages, with a right sidebar for secondary navigation. They're often used for more in-depth and text-heavy content, although they have many of the same callout, media, and feature style options as routing pages do. When using secondary navigation, limit the number of links to eight items or fewer.
Using Sidebars on Detail Pages
On small screens and mobile devices, the content in the sidebar will stack below the content in the main column. Any full-width rows below the main/sidebar columns will then stack beneath the sidebar navigation and any other components that may be in the sidebar. In cases where you need the sidebar content to be at the bottom of the page on mobile, avoid adding full-width columns below the main content area.
Specialty Pages
There are lots of components available to help you customize your page. See the components guide for more details. Here are some example pages to help kickstart your ideas:
Page Headers
There are two page header variations for the site: a simple page header and a complex page header.
Simple Page Header
This smaller, imageless page header is intended for use with interior pages. Breadcrumbs are optional.
Complex Page Header
This larger header with an image is for use with top-level or routing pages. It comes with the following options:
- Image: use an image with a 16:9 ratio that is at least 1680px wide.
- Summary: an optional blurb of messaging text to introduce the content on the page.
- Call to Action Button: An optional link or call to action, 35 characters or less.
- Breadcrumbs may be turned on for this page header, but it is not recommended, especially if the page is very deep in the site navigation tree.