Separator¶

Styles for a separator used in separator macro.

Structurally we have two elements .separator and .separator-horizontal. Each of them contains their own modifiers. .separator contains the following two modifiers:

.separator_m
.separator_l

And .separator-horizontal contains the following two modifiers:

.separator-horizontal_s
.separator-horizontal_m

Example¶

Here is an example of separator element usage.

HTML

<div class="example-wrapper">
    <p>Text one</p>
    <div class="separator separator_l"></div>
    <p>Text two</p>
</div>

Separator tags¶

The .separator classes were designed to be used with block elements like <div>. However, you can use them with any other element and customize it to your own needs.

LESS¶

You can modify any separator less variable in your User Less section to change separator styles.

Separator variables¶

Variables used to style separator.

@separatorBorderWidth: 1px;
@separatorBorderStyle: solid;
@separatorBorderColor: @neutralColors200;

@separatorMarginVerticalBase: @globalSpacing;

@separatorXSMarginVertical: @separatorMarginVerticalBase * 0.5;
@separatorSMarginVertical: @separatorMarginVerticalBase;
@separatorMMarginVertical: @separatorMarginVerticalBase * 1.5;
@separatorLMarginVertical: @separatorMarginVerticalBase * 2;

@separatorMarginHorizontalBase: @globalSpacing;

@separatorMarginHorizontal: @separatorMarginHorizontalBase;
@separatorSMarginHorizontal: @separatorMarginHorizontalBase / 2;
@separatorMMarginHorizontal: @separatorMarginHorizontalBase * 1.25;

@separatorBorderColorSecondary: @neutralColors100;
@separatorBorderColorTertiary: @neutralColors200;

If you want to change separator styles, you can just change the variables. To change a default border-color just modify @separatorBorderColor variable.

@separatorBorderColor: red;

Separator styles¶

Here are standard separator styles.

.separator {
    width: 100%;
    border-bottom: @separatorBorderWidth @separatorBorderStyle @separatorBorderColor;

    margin: @separatorSMarginVertical 0;

    &_xs {
        margin: @separatorXSMarginVertical 0;
    }

    &_s {
        margin: @separatorSMarginVertical 0;
    }

    &_m {
        margin: @separatorMMarginVertical 0;
    }

    &_l {
        margin: @separatorLMarginVertical 0;
    }

    &-horizontal {
        height: 100%;
        width: fit-content;
        display: list-item;
        border-bottom: 0;
        border-left: @separatorBorderWidth @separatorBorderStyle @separatorBorderColor;

        margin: 0 @separatorMarginHorizontal;

        &_s {
            margin: 0 @separatorSMarginHorizontal;
        }

        &_m {
            margin: 0 @separatorMMarginHorizontal;
        }
    }

    &_secondary {
        border-color: @separatorBorderColorSecondary;
    }

    &_tertiary {
        border-color: @separatorBorderColorTertiary;
    }
}

.text-separator {
    display: flex;
    align-items: center;
    gap: 2rem;
}

Macros reference¶

separator