# Dividers

The **Styled Divider (Horizontal)** and **Styled Divider (Vertical)** widgets create a thin line to visually separate content. While they are two separate widgets in the builder, they share the same styling options. This guide covers the properties for both.

{% embed url="<https://youtu.be/JOc4ugYcv8U?si=Hk3GGA16jlavRk8d>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=JOc4ugYcv8U>

### Core Concept: Horizontal vs. Vertical

The primary difference between the two widgets is their orientation and how they are used in layouts.

* **Styled Divider (Horizontal)**: Use this to separate content vertically (e.g., between items in a `Column`).
* **Styled Divider (Vertical)**: Use this to separate content horizontally (e.g., between items in a `Row`).

<figure><img src="/files/q4fttWoEW0flWAJ85Eso" alt="A diagram showing a horizontal divider separating items in a Column, and a vertical divider separating items in a Row."><figcaption><p>Using a Horizontal Divider in a Column and a Vertical Divider in a Row.</p></figcaption></figure>

***

### Properties

The Divider's properties are grouped by function.

#### Layout & Sizing

<table><thead><tr><th width="176.25390625">Property</th><th>Description</th></tr></thead><tbody><tr><td><code>Thickness</code></td><td>The thickness of the divider line in pixels.</td></tr><tr><td><code>Indent</code></td><td>The amount of empty space at the beginning of the divider (left for horizontal, top for vertical).</td></tr><tr><td><code>End Indent</code></td><td>The amount of empty space at the end of the divider (right for horizontal, bottom for vertical).</td></tr><tr><td><code>Height</code></td><td>The total vertical space the widget occupies. Applicable to the <strong>Horizontal Divider</strong>.</td></tr><tr><td><code>Width</code></td><td>The total horizontal space the widget occupies. Applicable to the <strong>Vertical Divider</strong>.</td></tr></tbody></table>

<figure><img src="/files/ErjFjLc8fpDNON1ivYI0" alt="A diagram illustrating the Thickness, Indent, and End Indent properties of a divider."><figcaption><p>Visual explanation of the <code>Thickness</code>, <code>Indent</code>, and <code>End Indent</code> properties.</p></figcaption></figure>

#### Line Style

<table><thead><tr><th width="176.25390625">Property</th><th>Description</th></tr></thead><tbody><tr><td><code>Line Style</code></td><td>The pattern of the divider line. Options are <code>Solid</code>, <code>Dashed</code>, or <code>Dotted</code>.</td></tr><tr><td><code>Dash Pattern</code></td><td>A custom pattern for dashed lines, defined as an array of dash lengths and gap lengths (e.g., <code>[4, 2]</code> for a 4px dash followed by a 2px gap). Only available when <code>Line Style</code> is <code>Dashed</code>.</td></tr><tr><td><code>Stroke Cap</code></td><td>The style for the ends of the line segments. Options are <code>Butt</code> (flat), <code>Round</code>, or <code>Square</code>. Not applicable when <code>Line Style</code> is <code>Dotted</code>.</td></tr></tbody></table>

<figure><img src="/files/2zbfWl7KgSKWXvgy7w7g" alt="Examples of different divider line styles: Solid, Dashed, and Dotted."><figcaption><p>Examples of <code>Solid</code>, <code>Dashed</code>, and <code>Dotted</code> line styles.</p></figcaption></figure>

#### Color & Fill

You can style the divider with either a solid color or a gradient.

<table><thead><tr><th width="176.25390625">Property</th><th>Description</th></tr></thead><tbody><tr><td><code>Color</code></td><td>The solid color of the divider.</td></tr><tr><td><code>Gradient</code></td><td>The gradient configuration for the divider. Allows for multi-color effects.</td></tr></tbody></table>

<figure><img src="/files/LIJpLhoPHMLPuBdWQcdo" alt="Examples of a divider with a solid color fill and a gradient fill."><figcaption><p>Dividers can be styled with a solid <code>Color</code> or a <code>Gradient</code>.</p></figcaption></figure>

***

### Default Properties

The Divider widget supports all [Default Properties](/ui-building-blocks/widgets/default-properties.md).

### Use Cases (Horizontal & Vertical)

You’ll typically use a **Divider** when you want to separate content **visually** without using heavy borders or boxes.

**Horizontal Divider – Use Cases**

* **Between list items**
  * Order list, settings list, notifications list, profile options.
* **Section breaks in a page**
  * Split “Profile Info”, “Preferences”, “Security” sections.
* **Form grouping**
  * Separate different form groups (Personal Info vs Payment Info).
* **Summary vs details**
  * Line between a header/summary row and detailed content below.

**Vertical Divider – Use Cases**

* **Between actions in a row**
  * “Call | Message | Block” style actions.
* **Split layout**
  * Separate two panels: e.g., filters on left, results on right (in wider layouts).
* **Toolbar or header actions**
  * Visually group icons or buttons in a top bar or bottom bar.


---

# 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.digia.tech/ui-building-blocks/widgets/content-display-widgets/dividers.md?ask=<question>
```

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.