# Divider

![](https://docs-assets.foxecom.app/motrix-theme/4321d87b-4ecf-45e7-bd20-da485f0ad34d.png)

The **Divider** block adds a horizontal line between content to create visual separation and improve spacing. Use it to **separate content groups, create breaks between headings and text, or add subtle structure between blocks** without creating a new section.

You can control the divider’s thickness and length, adjust the space above and below it, and choose whether it appears on desktop, mobile, or both.

## Settings

### Layout

<Table widths="30%">
  | Setting                | Description                                                        | Options           |
  | ---------------------- | ------------------------------------------------------------------ | ----------------- |
  | **Thickness**          | Controls how thick the divider line appears.                       | **0.5–5px**       |
  | **Length**             | Controls how far the divider stretches across the available width. | **5–100%**        |
  | **Disable on desktop** | Hides the divider on desktop devices.                              | **On** or **Off** |
  | **Disable on mobile**  | Hides the divider on mobile devices.                               | **On** or **Off** |
</Table>

### Padding

Controls the space above and below the divider separately for desktop and mobile.

<Table widths="30%">
  | Setting     | Description                                                   | Options                   |
  | ----------- | ------------------------------------------------------------- | ------------------------- |
  | **Devices** | Selects which device the padding settings apply to.           | **Desktop** or **Mobile** |
  | **Top**     | Controls the space above the divider for the selected device. | **0–100px**               |
  | **Bottom**  | Controls the space below the divider for the selected device. | **0–100px**               |
</Table>

## Tips and best practices

* Use a shorter **Length** when you want a subtle accent instead of a full-width divider.
* Adjust desktop and mobile padding separately when the surrounding content needs different spacing across screen sizes.
* Use **Disable on desktop** or **Disable on mobile** when the divider is only needed for one layout.