Page Regions

Regions are areas where components can be added that appear in a layout on the page. This is most commonly used in the Page content type whereas other content types may have only one distinct region to add components. Each region relates to a specific area of the page. 

Below is an example of the editing experience for the Page content type. This is split into three regions containing: 

• Top Region: This is available on the Page content type only. This provides a full-width region where users can add components. This would most frequently be used to hold a Hero component or if nothing is selected, this is where the title of the page will be displayed on the screen.

  • Note: The background color of components added to the top region will span the full-width of the browser window. The content will align with the rest of the content on the page.

• Main Region: A region where users can add components to the body of a page. This becomes full-width when the section navigation is toggled to the “off” position. 

• Bottom Region: A full-width region where users can add components to the bottom of the page below the main page content

  • Note: The background color of components added to the bottom region will span the full-width of the browser window. The content will align with the rest of the content on the page.

There are two additional regions where components can be added across any content type. These are called the Additional Content area and the Global Content area. These are represented on all content types, but differ in their placement and function.

• Global Content Section: This section is reserved for editors and site administrators that are adding components that appear across all instances of the content type. For example, a Person page may use a global content section to display other Person pages that share the same department.

• Additional Content Section: This section is reserved across all content types to add additional components to your structured content layout. For example, if you had an event and all of the vital event information towards the top of the page, you may want to add additional text components after that information to help engage users about the event further. You could add this additional information in the Additional Content section by choosing a particular component and adding information to it.