# Divider

<figure><img src="https://3723856256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGnixyIfIYFWroNtVmZo6%2Fuploads%2Fgit-blob-012e56b1d17a2f58820fc0f3a0330ba161918137%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

## Overview

A simple horizontal divider component that provides visual separation between content sections. Supports customizable spacing, border colors, and responsive visibility options.

## Common use cases

* Use to create clear visual separation between different content areas
* Consider using subtle border color for general content separation
* Use stronger border colors to emphasize major content breaks
* Adjust spacing based on surrounding content density
* Utilize visibility options to create different layouts for mobile/desktop

## Block settings

### General

| Setting                | Description                 | Options                   |
| ---------------------- | --------------------------- | ------------------------- |
| Show advanced settings | Reveals visibility settings | Checkbox (default: false) |

### Spacing

| Setting        | Description               | Options                 |
| -------------- | ------------------------- | ----------------------- |
| Top spacing    | Spacing above the divider | 0 - 300 px (default: 0) |
| Bottom spacing | Spacing below the divider | 0 - 300 px (default: 0) |

### Color

| Setting      | Description                            | Options                                                                                             |
| ------------ | -------------------------------------- | --------------------------------------------------------------------------------------------------- |
| Border color | Controls the color of the divider line | <p>• Body<br>• Subtle (default)<br>• Strong<br>• Primary<br>• Secondary<br>• Tertiary<br>• None</p> |

### Display

| Setting    | Description                        | Options                                                                                                                            |
| ---------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| Visibility | Controls when the block is visible | <p>• All (default)<br>• Mobile only<br>• Desktop only</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on</p> |