Brand Update - October 16, 2024: Existing style updated to brand gradient style (primary and secondary options)


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

For general information about the Separator Core Component, refer to AEM's Separator Component documentation.


Usage guidelines

Here are some separator best practices:

  • Use separators to divide sections of text on a page
  • Do not use separators when sections of a page are naturally divided by images or background colors
  • Use one gradient style per page

Styles

Default

Use the default style to define sections of content.


Assertive

Use the assertive separator to emphasize the break between sections of content.


Ghost

Use the ghost separator on assertive or accent container backgrounds.


Primary gradient

Use the primary gradient separator for decorative purposes only. Do not overuse gradient separators.


Secondary gradient

Use the secondary gradient separator for decorative purposes only. Do not overuse gradient separators.



Top margin

The Separator component has spacing applied to the top and bottom of the separator line.

Increase by two steps


Increase by one steps


Default


Decrease by one steps


Decrease by two steps


Remove