Dividers

Dividers let you create dividers freely within components. They’re awesome for segmenting content and creating visual hierarchy.

Create horizontal and vertical dividers easily

You can use Divider-horizontal and Divider-vertical to create the divider you want.

<!-- Horizontal divider -->
<div class="Divider-horizontal"></div>

<!-- Vertical divider -->
<div class="Divider-vertical"></div>

Horizontal Divider

One

Two

Vertical Divider

One

Two

Make dividers with labels

Add text in the Divider to create a labelled divider. For vertical labelled dividers, make sure there’s sufficient height or the dividers will not be visible!

<!-- Horizontal divider -->
<div class="Divider-horizontal">Horizontal</div>

<!-- Vertical divider -->
<div class="Divider-vertical">Vertical</div>

Vertical Dividers

Vertical

Horizontal

Horizontal Divider

Create dividers between items

To create dividers between multiple items, you can use DividerBetween instead of Divider.

<!-- Horizontal divider -->
<div class="DividerBetween-horizontal"> ... </div>

<!-- Vertical divider -->
<div class="DividerBetween-vertical"> ... </div>

Horizontal Dividers

One

Two

Three

Vertical Dividers

One

Two

Three

Intro

There are two kinds of dividers:

Divider-<direction>: Creates a divider element
DividerBetween-<direction>: Creates a divider between elements

Basic Divider Usage

Horizontal Dividers

You can create horizontal dividers with Divider-horizontal.

<div class="Vertical">
  <div>One</div>
  <div class="Divider-horizontal"></div>
  <div>Two</div>
</div>

If dividers are placed in a component that contains padding, you can break out of the padding with Breakout (which are simply negative margins).

<div class="Vertical">
  <div>One</div>
  <div class="Divider-horizontal -mx-4"></div>
  <div>Two</div>
</div>

Vertical Dividers

You can create a vertical divider with Divider-vertical. Please note that vertical dividers only work in Flexbox containers.

<div class="Horizontal">
  <div>One</div>
  <div class="Divider-vertical"></div>
  <div>Two</div>
</div>

Likewise, if your dividers are placed in a component that contains padding, you can break out of the padding with Breakout (which are simply negative margins).

<div class="Horizontal">
  <div>One</div>
  <div class="Divider-vertical -my-4"></div>
  <div>Two</div>
</div>

Dividers in both directions

You can use a combination of dividers to create a pretty complex card layout.

<div class="Vertical FrameContentItem">
  <div>One</div>
  <div class="Divider-horizontal -mx-4"></div>
  <div class="Horizontal">
    <div>Two</div>
    <div class="Divider-vertical -my-4"></div>
    <div>Three</div>
  </div>
</div>

Note

By the way, this kind of layout is best built with the Card component.

Dividers with Label

You can create a horizontal labelled divider by adding the label in the Divider element.

<div class="Divider-horizontal">Label</div>

Likewise, you can create a vertical labelled divider by adding the label in the Divider element. Bonus: You can also rotate the text to make it look cooler with Writing classes from Splendid Styles!

<div class="Divider-vertical">Label</div>

<div class="Divider-vertical">
  <div class="Writing-rotateLeft">Label</div>
</div>

Gap

You can change the gap between the label and the divider with the gap property or the --gap variable.

<!-- Horizontal divider -->
<div class="Divider-horizontal gap-8">Label</div>

<!-- Vertical divider -->

<div class="Divider-vertical gap-8">Label</div>

Divider Between

DividerBetween creates a divider between two or more elements.

Horizontal Divider Between

You can create horizontal dividers between elements with DividerBetween-horizontal. It uses border-top on subsequent elements to create the divider.

<!-- Horizontal divider -->
<div class="DividerBetween-horizontal">
  <div class="p-4">One</div>
  <div class="p-4">Two</div>
  <div class="p-4">Three</div>
</div>

Vertical Divider Between

You can create vertical dividers between elements with DividerBetween-vertical. It uses border-left on subsequent elements to create the divider.

Tip

When you us DividerBetween, you have to remove any gap between elements the whitespace would look awkward.

The Card-split component which handles this for you automatically so it’s best to use DividerBetween with it. But if you’re not using Card-split, you can manually set gap to 0.

<!-- Horizontal divider -->
<div class="DividerBetween-vertical Horizontal gap-0">
  <div class="p-4">One</div>
  <div class="p-4">Two</div>
  <div class="p-4">Three</div>
</div>

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Here’s the CSS for Divider.

[class*='Divider-'] {
  padding: 0 !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  align-self: stretch;

  &:where(:not(:empty)) {
    gap: var(--gap, 1rem);
  }

  &::before,
  &::after {
    content: '';
    background-color: var(--border-color, currentColor);
  }
}

.Divider-horizontal {
  flex-grow: 1;
  &::before,
  &::after {
    flex-grow: 1;
    height: var(--border-width, 1px);
  }
}

.Divider-vertical {
  align-self: stretch;
  display: flex;
  flex-direction: column;

  .Vertical > & {
    flex-grow: 1;
  }

  &::before,
  &::after {
    flex-grow: 1;
    width: var(--border-width, 1px);
  }
}

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Dividers

Properties

Name	Default	Description
`width`	`auto`	Width of the divider. Used in `Divider-vertical` if you don’t wanna use `--border-width`.
`height`	`auto`	Width of the divider. Used in `Divider-horizontal` if you don’t wanna use `--border-width`.divider

CSS Variables

Variable	Default	Description
`--border-width`	`1px`	Width of the divider
`--border-color`	`currentColor`	Color of the divider
`--gap`	`1rem`	Gap between dividers and their labels

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.