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

If you want dividers to reach the edges of the card, consider using our card component. It has a card-split modifier that lets you do divider stuff easily.

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 divider-between instead of divider.

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

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

Horizontal Dividers

One

Two

Three

Vertical Dividers

One

Two

Three

For divider-between to work flawlessly within flex or grid items, consider using our card-split component. It will otherwise be a hot mess.

Intro

There are two kinds of dividers:

divider-<direction>: Creates a divider element
divider-between-<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 negative margins or breakout.

<div class="vertical">
  <div>One</div>
  <div class="divider-horizontal -mx-2"></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 since they need to be able to stretch to available height.

<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 negative margins or breakout.

<div class="horizontal">
  <div>One</div>
  <div class="divider-vertical -my-2"></div>
  <div>Two</div>
</div>

Dividers in both directions

You can use a combination of dividers to create a pretty complex card layout, but this sort of thing is best done with the card-split component.

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

<div class="card-split vertical">
  <div>One</div>
  <div class="card-split divider-horizontal"></div>
  <div class="horizontal">
    <div>Two</div>
    <div class="divider-vertical"></div>
    <div>Three</div>
  </div>
</div>

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!

When doing this, you may need to add flex-grow to the divider to make it grow to take up all available space.

<div class="divider-vertical flex-grow">Label</div>

<div class="vertical">
  <div class="divider-vertical flex-grow">
    <div class="writing-rotate-left">Label</div>
  </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 flex-grow gap-8">Label</div>

Divider Between

divider-between creates a divider between two or more elements.

Tip

When using divider-between in a flex or grid container, you need to remove gap to prevent awkward whitespaces caused by the gap.

The card-split component which handles this for you automatically so it’s best to use divider-between with it.

horizontal Divider Between

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

<!-- horizontal divider -->
<div class="divider-between-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 divider-between-vertical. It uses border-left on subsequent elements to create the divider.

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

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.

Here’s the CSS for Divider.

.divider-horizontal {
  flex-grow: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 !important;
  border-radius: 0 !important;

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

  &::before,
  &::after {
    content: '';
    flex-grow: 1;
    height: var(--border-width, 1px);
    background-color: var(--border-color, currentColor);
  }
}

.divider-vertical {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 !important;
  border-radius: 0 !important;

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

  &::before,
  &::after {
    content: '';
    flex-grow: 1;
    width: var(--border-width, 1px);
    background-color: var(--border-color, currentColor);
  }
}

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.

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 purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.