Divider

A simple divider. Allows for showing a label in the center, which is helpful for seperating sidebars or other structured content.

Preview

---

Divider

Code

DividerExample.astro

---
import { Divider } from '@studiocms/ui/components';
---

<Divider>
  Divider
</Divider>

Changing the label background color

'Read the “', Changing the label background color, '” section'

There may be cases where your divider does not sit on an element with the default page background color. In such cases, you can use the background prop to change it to match the correct color.

DividerBackgroundExample.astro

---
import { Divider } from '@studiocms/ui/components';
---

<Divider background='background-step-1'>
  Divider
</Divider>