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.

Configuration

Properties

Title is the text that appears alongside the separator to provide context or additional information, labeling the sections the separator divides.

Icon Name incorporates an icon to sit with the separator for added visual context, and Icon Size adjusts the icon's size to suit the design — useful as a visual cue that complements the title or signifies the following content.

Align Content determines the placement of the title and icon relative to the separator line: Start, End, or Center.

Orientation sets the separator's orientation to Horizontal or Vertical, providing flexibility in how content is divided — whether a side-by-side comparison or a top-and-bottom segmentation.

Styling

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.