# 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="" %}
---
# Agent Instructions: 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:
```
GET https://docs.intranet.ai/sharepoint-intranet/components/graphic-dividers.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.