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. 
    Components

    Separator

    Separator displays a horizontal line on the page for dividing sections of content.

    Overview

    The separator component displays a horizontal line on the page for dividing sections of content.

    When to Use

    The separator component is a subtle way to separate content into groups, sections, options, or parts. Separators are used to group things, not to separate individual items. The Separator should be responsive and adapt to different screen sizes and devices, ensuring a consistent and readable experience.

    Formatting

    Variations

    There are two types of separators: vertical and horizontal. The separator has a 1px border weight and can be used with either vertical or horizontal separators. The separator should use an outline color token.
    Separator variations

    Accessibility

    The separator has no meaningful semantic value, so it should be considered decorative and ignored by screen readers. <hr> tags are used for visual purposes only. Therefore, it does not need to be announced by a screen reader. Add the attribute aria-hidden="true" to the <hr> so screen readers will ignore the element.