Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    AEM Components

    Separator Component

    The Separator component is used to break up page content. 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 black 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.

    3. Separator Size dropdown: Select how much padding the Separator should contain. Sizes include XS (16px), S (24px), M (32px), L (48px), and XL (64px). Default XS.

    Accessibility

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