> For the complete documentation index, see [llms.txt](https://docs.intranet.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.intranet.ai/sharepoint-intranet/components/graphic-dividers.md).
# Graphic Dividers
## What is Graphic Dividers
Graphic Dividers is a feature that allows you to create **dividers** not only in **different colors** but also with **shapes** like the triangle, the wave, the angle and the swift tail. These shapes can **add motion** to your SharePoint pages and provide them with a **stylish touch**, making them even more appealing.
{% hint style="info" %}
Explore the **advantages** of Intranet.ai features by [**clicking here**](https://intranet.ai/features/) to learn more.
{% endhint %}
***
## Add the Graphic Dividers web part to a SharePoint page
* If your page is not already in edit mode, click **Edit** at the top right of the page.
* Hover your mouse above or below an existing web part and you'll see a line with a circled +, like this: 
* Click on it and, in the web part search box, enter **IAI - Divider** to quickly find and select the Graphic Dividers web part, which is named "IAI - Divider".
{% hint style="info" %}
We recommend using the divider in a full-width section to ensure it covers the entire page width.
{% endhint %}
* Click on the **Edit** properties 
button on the left of the web part to open the property pane, where you will have a few sections to configure. See below for more information on each of these sections.
***
## Configuration
1. [Layout settings](#layout-settings)
2. [Triangle settings](#triangle-settings)
3. [Wave settings](#wave-settings)
4. [Angle settings (Trapezoidal shape)](#angle-settings-trapezoidal-shape)
5. [Swift Tail settings](#swift-tail-settings)
### **Layout settings**
* **Choose a layout**: in this section, you can choose the divider layout from the drop-down menu. Your options include triangle, wave, trapezoidal shape (angle) and swift tail.
* **Choose divider**: here you can select the divider color by simply moving the circle on the color palette or by entering the hexadecimal and/or RGB code.
* **Choose background color**: here you can select the background color by simply moving the circle on the color palette or by entering the hexadecimal and/or RGB code.
* **Webpart height**: by adjusting the slider within the bar, you can choose the divider thickness. The thickness will depend on how prominently you want the chosen layout effect to be visiblei
### **Triangle settings**
* **Edit the tip direction:** here you can decide whether to change the direction of the tip (if you have chosen the triangle layout). If you enable **Yes**, you will have the option to **select the tip direction** by moving within the bar.
### **Wave settings**
* **Choose the wave**: you can choose the desired wave effect by moving within the bar.
### **Angle settings (**trapezoidal shape)
* **Trapezoidal direction:** here you can decide the direction of the trapezoid angle. By default, it is set to the right, but you can enable the button to orient it to the left.
### Swift Tail settings
* **Edit the tip direction:** here you can decide whether to change the direction of the tip. You will have the option to **select the tip direction** by moving within the bar.
***
## Create a colored divider line
The Graphic Dividers web part can also be used to create a colored divider line. In this case, we suggest creating a **section that is not full-width** and adding our graphic divider web part as [described at the beginning](#add-the-graphic-dividers-web-part-to-a-page) of this guide.
* Once the web part is added, **choose any of the layouts** from the web part's properties.
* Choose the **same color** for both the **divider's color** and its **background**.
> For example: Pink (#e83782 or RGB 232, 55, 130)
{% hint style="info" %}
**Please note**: the chosen layout doesn't matter, but it's **essential to set the same color** for both the **divider** and the **background**.
{% endhint %}
* **Select the height** you want the divider to have. In our example, we've set it to 2.
Here's how it would look as a divider in a column.
{% embed url="" %}