# AX - Separador

## Descripción general

**AX - Separador** es un componente de Experience Cloud que crea divisores visuales entre secciones de contenido en las páginas de Experience Sites.

Úsalo para añadir líneas horizontales, espaciado o interrupciones visuales entre componentes para mejorar la organización y legibilidad de la página. Configura el estilo, color, grosor y espaciado del separador en Experience Builder.

Perfecto para dividir secciones de formularios, separar bloques de contenido, organizar páginas extensas o en cualquier lugar donde tu portal necesite una separación visual clara entre distintas áreas de contenido. 

## Configuración

{% tabs %}
{% tab title="🎛️ Propiedades" %}

| Nombre                                       | Descripción                                                                                                                                              | Uso                                                                                                                                                             |
| -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Título**                                   | El texto aparecerá junto al separador para proporcionar contexto o información adicional.                                                                | Implementa esta propiedad para etiquetar las secciones que el separador está dividiendo, mejorando la comprensión del usuario.                                  |
| <h4>Nombre del ícono y tamaño del ícono</h4> | Incorpora un ícono junto al separador para añadir contexto visual. También se puede ajustar el tamaño del ícono para adaptarlo a la estética del diseño. | Usa íconos como señales visuales que complementen el título o indiquen el contenido siguiente, contribuyendo a la función comunicativa del separador.           |
| **Alinear contenido**                        | Determina la colocación del título y el ícono respecto a la línea del separador. Las opciones incluyen **`Inicio`**, **`Fin`**, o **`Centro`**`.`        | Alinea el contenido según el diseño y el énfasis requerido, asegurando que el separador se integre sin problemas con el flujo de la página.                     |
| **Orientación**                              | Establece la orientación del separador en **`Horizontal`** o **`Vertical`**, proporcionando flexibilidad en la forma en que se divide el contenido.      | Elige la orientación adecuada para que coincida mejor con el diseño de tu contenido, ya sea una comparación lado a lado o una segmentación superior e inferior. |
| {% endtab %}                                 |                                                                                                                                                          |                                                                                                                                                                 |

{% tab title="🎨 Estilizado" %}

| Nombre     | Descripción                                                                                                                                                       | Uso                                                                                                                                                                   |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Título** | Personaliza la apariencia del título con opciones de color, tamaño de fuente, estilo y grosor.                                                                    | Estiliza el título para asegurarte de que destaque adecuadamente y mantenga la coherencia con el esquema de diseño general del sitio.                                 |
| **Ícono**  | Estiliza el ícono con color de fondo, color de primer plano, un estado predeterminado para el color de primer plano y el radio del ícono para bordes redondeados. | Ajusta la apariencia del ícono para hacerlo más prominente o sutil, alineándolo con los objetivos de diseño.                                                          |
| **Borde**  | Define el borde del separador estableciendo su tamaño, color y estilo (sólido, discontinuo, punteado y más).                                                      | Ajusta la configuración del borde para crear el nivel deseado de distinción entre secciones de contenido, desde una línea pronunciada hasta una separación más sutil. |

{% endtab %}
{% endtabs %}