Divider

Usage #

The default divider is used without class simply as an hr tag.

<hr>

The divider with the hr tag has a default top and bottom margins of 1.5em. And suitable for separating blocks of text in a long content or for other decorative purposes.

Use the divider class with div or hr to create a divider between blocks with color, size, and length params.

<div class="divider"></div>
<hr class="divider divider-dark divider-6"></hr>

Use the divider-vertical modifier to create vertical dividers inside Flex or Row.

<div class="row row-10">
    <div></div>
    <div class="divider divider-vertical"></div>
    <div></div>
</div>

Color #

By default, the divider has several color options.

<div class="divider"></div>
<div class="divider divider-dark-mid"></div>
<div class="divider divider-dark"></div>
<div class="divider divider-primary"></div>
<div class="divider divider-light"></div>
<div class="divider divider-light-muted"></div>

Override the existing colors

To change the color of a specific divider, simply override its color variables in $colors map. See also how to customize the framework.

// =Colors
$colors: map-extend($colors, (
    divider: (
        default: var(--palette-black-30)
    )
));

Add a color

You can add a new color to the divider by extending $colors map and specifying the variable colors from the palette.

// =Colors
$colors: map-extend($colors, (
    divider: (
        orange: var(--palette-orange-base)
    )
));

Style #

Use the dashed or dotted modifier to change the divider style.

<div class="divider divider-dark divider-dashed"></div>
<div class="divider divider-dark divider-2 divider-dotted"></div>

Size #

By default, the size of the divider is 1px. The framework has several preset values for divider size.

// =Scales
$scales: map-extend($scales, (
    divider: (
        1: 1px,
        2: 2px,
        3: 3px,
        4: 4px,
        6: 6px,
        8: 8px,
        10: 10px
    )
);

Use them as a modifier of the divider.

<div class="divider divider-dark divider-4"></div>
<div class="divider divider-dark divider-10"></div>

This works for vertical dividers as well.

<div class="row row-10 flex-middle">
    <div></div>
    <div class="divider divider-vertical divider-dark divider-4"></div>
    <div></div>
    <div class="divider divider-vertical divider-dark divider-10"></div>
    <div></div>
</div>

Length #

By default, the length of the divider is 100%. The framework has several preset values for divider length.

// =Scales
$scales: map-extend($scales, (
    divider-length: (
        small: 60px,
        medium: 80px,
        large: 100px
    )
);

<div class="divider divider-dark divider-small"></div>
<div class="divider divider-dark divider-medium"></div>
<div class="divider divider-dark divider-large"></div>

Or you can use the Sizing utility to set the width of the divider.

<div class="divider divider-dark max-50"></div>
<div class="divider divider-dark max-75"></div>

Use the Centered utility to align the divider by center.

<div class="divider divider-dark divider-8 divider-large centered"></div>
<div class="divider divider-8 max-50 centered"></div>

Length modifiers work for vertical dividers as well.

<div class="row row-10">
    <div></div>
    <div class="divider divider-vertical divider-dark divider-small"></div>
    <div></div>
    <div class="divider divider-vertical divider-dark divider-large"></div>
    <div></div>
</div>

Use the flex-middle modifier to make all dividers with a specified height vertically centered.

<div class="row row-10 flex-middle">
    <div></div>
    <div class="divider divider-vertical divider-dark divider-small"></div>
    <div></div>
    <div class="divider divider-vertical divider-dark divider-large"></div>
    <div></div>
</div>

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.

// colors
--divider-color: var(--divider-default);

// params
--divider-size: 1px;
--divider-length: auto;
--divider-style: solid;