Javascript is not enabled.

Javascript must be enabled to use this site. Please enable Javascript in your browser and try again.

Design System - IN BETA

Getting Started            Components            Presets             Templates

Separator

The AEM Core Separator Component displays a horizontal line on the page for dividing sections of content.

Editor to Copy/Paste
Training
Figma Design

Available Colors

Light, Medium, Dark, and Transparent with Small, Medium, Large, or No Margins

Dark Background Containers

Having none selected with a margin shows the light separator

Training

The separator can be used to divide sections of content. It can be three different colors:

  • Light

  • medium

  • Dark

  • Transparent

It can also be different sizes:

  • Small

  • Medium

  • Large

Training Video

4:15

Authoring Capability

  • Separator is decorative (checlbox) - This is checked off when the separator is decorative and you want a screen reader to ignore it.

  • Color - Authors have the option to select between:

    • None

    • Light

    • Medium contrast

    • Dark

    • Transparent

  • Margin - Authors have the ability to add a margin to make the separator spacing more:

    • None

    • Small

    • Medium

    • Large

    • No margin