# Smart separator

The **Smart separator** block draws a line between two blocks, horizontal or vertical depending on the layout around it. This page describes its orientation, color, thickness and the style of the site’s separators.

## Add a separator

1. In the editor, open the inserter and choose **Smart separator**, or search for `line` or `rule`. [Add a block](https://lovelyrender.com/documentation/add-block/) describes the ways to insert a block.
2. Place it between the two blocks to separate.

As soon as it is inserted, the separator has the **Separator** style: a one-pixel line. Its light tint follows the text color in both light and dark mode.

## The orientation of the line

The separator has no orientation setting: it follows from the layout around it.

| Placed in | Resulting line |
| --- | --- |
| A container where blocks stack | A horizontal line across the full width, one pixel high. |
| A horizontal **Flex** container | A vertical line one pixel wide, as tall as the row, as long as **Align items** is not set on the container. |

For a thicker or shorter line, set its height or width in the **Size & Spacing** panel.

## Styles tab

The separator can be set in the **Default** and **Active** states. It has no **Settings** tab.

| Panel | Purpose |
| --- | --- |
| **Colors** | The background color and its opacity, which make up the color of the line. The separator has no text color. See [Color a block](https://lovelyrender.com/documentation/color-block/). |
| **Size & Spacing** | The thickness, length and margins of the line, see [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/). |
| **Borders**, **Effects** | [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/) |

The **Separators** part of the design catalog gives all the separators of the site a look: **Thin**, **Thick**, **Dotted**, **Faded** or **Colored** ([Adopt a design from the catalog](https://lovelyrender.com/documentation/adopt-catalog-design/)).

## Animations tab

The **Animations** tab makes the line appear, for example when it comes into view. [Animate a block](https://lovelyrender.com/documentation/animate-block/) describes the effects.

## On a phone

The **Size & Spacing** panel is set screen by screen. A vertical line between two columns becomes horizontal when the row switches to **Vertical** orientation on phones.

## Accessibility

The separator is a decorative line: screen readers do not announce it. To mark the start of a new part, place a [Heading](https://lovelyrender.com/documentation/heading-block/), visible or hidden.

## Limits

- The separator contains nothing: no text or icon in the middle of the line.
- It has no **Hover** state.
- A line pasted from a web page becomes a separator with the site’s style: the thickness and color of the other site do not carry over.

## See also

- [Container](https://lovelyrender.com/documentation/container-block/)
- [Space out your blocks](https://lovelyrender.com/documentation/space-blocks/)
- [Adopt a design from the catalog](https://lovelyrender.com/documentation/adopt-catalog-design/)