# AX - Séparateur

## Aperçu

**AX - Séparateur** est un composant Experience Cloud qui crée des séparateurs visuels entre les sections de contenu sur les pages des sites Experience.

Utilisez-le pour ajouter des lignes horizontales, des espaces ou des coupures visuelles entre les composants afin d'améliorer l'organisation et la lisibilité de la page. Configurez le style, la couleur, l'épaisseur et l'espacement du séparateur dans Experience Builder.

Parfait pour diviser les sections de formulaires, séparer les blocs de contenu, organiser les pages longues ou partout où votre portail a besoin d'une séparation visuelle claire entre différentes zones de contenu. 

## Paramètres

{% tabs %}
{% tab title="🎛️ Propriétés" %}

| Nom                                          | Description                                                                                                                                                                 | Utilisation                                                                                                                                                                     |
| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Titre**                                    | Le texte apparaîtra à côté du séparateur pour fournir du contexte ou des informations supplémentaires.                                                                      | Implémentez cette propriété pour étiqueter les sections que le séparateur divise, améliorant ainsi la compréhension de l'utilisateur.                                           |
| <h4>Nom de l'icône et taille de l'icône</h4> | Incorporez une icône à côté du séparateur pour un contexte visuel supplémentaire. La taille de l'icône peut également être ajustée pour s'adapter à l'esthétique du design. | Utilisez les icônes comme repères visuels qui complètent le titre ou indiquent le contenu suivant, contribuant à la fonction communicative du séparateur.                       |
| **Aligner le contenu**                       | Déterminez le placement du titre et de l'icône par rapport à la ligne du séparateur. Les options incluent **`Début`**, **`Fin`**, ou **`Centre`**`.`                        | Alignez le contenu en fonction de la mise en page et de l'accent requis par le design, en veillant à ce que le séparateur s'intègre parfaitement au flux de la page.            |
| **Orientation**                              | Définissez l'orientation du séparateur sur **`Horizontal`** ou **`Vertical`**, offrant une flexibilité dans la manière dont le contenu est divisé.                          | Choisissez l'orientation appropriée pour correspondre au mieux à la mise en page de votre contenu, qu'il s'agisse d'une comparaison côte à côte ou d'une segmentation haut-bas. |
| {% endtab %}                                 |                                                                                                                                                                             |                                                                                                                                                                                 |

{% tab title="🎨 Style" %}

| Nom         | Description                                                                                                                                                                 | Utilisation                                                                                                                                                        |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Titre**   | Personnalisez l'apparence du titre avec des options pour la couleur, la taille de la police, le style et l'épaisseur.                                                       | Stylisez le titre pour qu'il se démarque de manière appropriée et conserve la cohérence avec le schéma de design global du site.                                   |
| **Icône**   | Stylisez l'icône avec une couleur d'arrière-plan, une couleur d'avant-plan, un état par défaut pour la couleur d'avant-plan et le rayon de l'icône pour des bords arrondis. | Ajustez finement l'apparence de l'icône pour la rendre plus proéminente ou discrète, en l'alignant sur les objectifs de conception.                                |
| **Bordure** | Définissez la bordure du séparateur en réglant sa taille, sa couleur et son style (plein, en tirets, en pointillés et plus).                                                | Ajustez les paramètres de la bordure pour créer le niveau de distinction souhaité entre les sections de contenu, d'une ligne prononcée à une coupure plus nuancée. |

{% endtab %}
{% endtabs %}