Separator
The Separator adds space between components.
Uses
The Separator is a horizontal line you can add between other components. It can improve the layout by adding white space. This provides more ‘breathing room’ and helps visually separate related pieces of content.
Although it's technically possible to create white space by using line breaks or empty paragraphs, doing so creates accessibility problems. The Separator component adds white space while maintaining accessibility.
By default, the Separator type is set to Transparent. It displays as a grey line when viewed in editing mode so that it's easy to work with, but is invisible in preview mode and once activated on the live page.
Separator in editing view
Separator on live page
Best practices
When to use a separator
- Separators are most often used on pages with the right sidebar or full width template.
- They're rarely used with the full browser window template, as spacing in a full browser window page is better adjusted through grid containers.
- If your page uses the right sidebar or full width template:
- Preview and refresh the page.
- If it looks like the content is running tight, add a separator. Separators are especially useful between consecutive WYSIWYGs, between an Introduction component and a WYSIWYG, and between a WYSIWYG and a Title component.
Margin
Set the Margin top and Margin bottom to 20. This way the separator will look nice on both desktop and mobile.
Separator type
- Transparent is the preferred setting, as it results in less clutter and a cleaner layout with fewer visual distractions.
- The alternative separator type is Grey line, which displays a 1px grey line on the live page. While the web designer occasionally uses this setting, it's best for AEM editors to use Transparent.
