Splendid layouts

Create horizontal and vertical dividers easily

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

index.html
<!-- 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!

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


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

Create dividers between items

To create dividers between multiple items, you can use divider-between instead of divider.

index.html
<!-- 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.