# 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="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-f1348dd2f2c9e63a8053ed8653f4799a1cd564e5%2Fdividers.jpg?alt=media" 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="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-769a84029abf525e0b92b7bf24282aceb455f373%2Fdivider_properties.jpg?alt=media" 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="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-e48db2efe223b1e9a22f5edf21f82c3ffb8929c0%2Fdivider_line_style.jpg?alt=media" 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="https://3626461507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbhApDTL7kHrXte2TTtjs%2Fuploads%2Fgit-blob-80bcbed25c59c811169867382edd4acb1cc0949f%2Fdivider_fill_style.jpg?alt=media" 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](https://docs.digia.tech/ui-building-blocks/widgets/default-properties "mention").

### 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.