Separator

Overview

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.

Settings

🎛️ Properties

Name	Description	Usage
Title	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.
Orientation	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.

🎨 Styling

Name	Description	Usage
Title	Customize the title’s appearance with options for color, font size, style, and weight.	Style the title to ensure it stands out appropriately and maintains consistency with the overall design scheme of the site.
Icon	Style the icon with background color, foreground color, a default state for the foreground color, and the icon radius for rounded edges.	Fine-tune the icon's look to make it more prominent or subtle, aligning with the design objectives.
Border	Define the separator's border by setting its size, color, and style (solid, dashed, dotted and more).	Adjust the border settings to create the desired level of distinction between content sections, from a pronounced line to a more nuanced break.