# 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

{% tabs %}
{% tab title="🎛️ 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.                                                  |
| <h4>Icon Name and Icon Size</h4> | 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.   |
| {% endtab %}                     |                                                                                                                                                  |                                                                                                                                                         |

{% tab title="🎨 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. |

{% endtab %}
{% endtabs %}