User Guide

Separator Component

The Separator component is used to break up content on the page. It is either a straight horizontal line that can be inserted as a design element to show where one section of content ends, or a space between sections.

 

Authors may drag and drop the Separator to the desired section of the page.

Overview

Component name: Separator

Authors who can use: all

Templates/page types that can use component: all

Required or optional: optional

Authoring Fields

Adding the Separator component to the page

Once on the desired page in Edit mode, add the Separator by doing the following:

Option 1: Double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “Separator” in the search bar, or scroll to the Separator in the list. Double click to add to page.

Option 2: On the left hand rail, navigate to the Components tab. Type “Separator” in the search bar, or scroll to the Separator in the list. Double click to add to page.

Editing the Separator component

1. With the edit wrench, open the component.

Separator toolbar, featuring the edit wrench.

2. Display Separator line checkbox: When checked, the Separator appears visually as a gray line across the page, designating space between the components above and below. When unchecked, there is still padding between the components, but there is no visual line. Default checked.

Accessibility

1. The Separator has no meaningful semantic value. It is considered decorative and is ignored by screen readers.