The Avonni Separator Component divides content sections within Experience Cloud sites. It enhances the visual appeal and organization of web pages by providing a distinct and customizable boundary between different pieces of content.




The text will appear alongside the separator to provide context or additional information.

Implement this property to label the sections the separator is dividing, enhancing user comprehension.

Icon Name and Icon Size

Incorporate an icon to sit with the separator for added visual context. The size of the icon can also be adjusted to suit the design aesthetics.

Use icons as visual cues that complement the title or signify the following content, contributing to the separator's communicative function.

Align Content

Determine the placement of the title and icon to the separator line. Options include Start, End, or Center.

Align the content based on the layout and emphasis required by the design, ensuring that the separator integrates seamlessly with the flow of the page.


Set the separatorโ€™s orientation to Horizontal or Vertical, providing flexibility in how content is divided.

Choose the appropriate orientation to match the layout of your content best, whether it's a side-by-side comparison or a top-and-bottom segmentation.

Last updated