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.

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>