AX - Separator

Overview

AX - Separator is an Experience Cloud component that creates visual dividers between content sections on Experience Sites pages.

Use it to add horizontal lines, spacing, or visual breaks between components to improve page organization and readability. Configure the separator's style, color, thickness, and spacing in Experience Builder.

Perfect for dividing form sections, separating content blocks, organizing long pages, or anywhere your portal needs clear visual separation between different content areas.

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