> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-separator.md).

# 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

{% tabs %}
{% tab title="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.
{% endtab %}

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

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-separator.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.