Divider: Spacing Base 

<div class="kx-divider kx-divider--size-base"></div>
 
<div class="kx-divider{% if size %} kx-divider--size-{{ size }}{% endif %}{% if text %} kx-has-text{% endif %}{% if classes %} {{ classes }}{% endif %}">
    {%- if dividerText %}<span class="kx-divider__txt">{{ dividerText }}</span>{% endif -%}
</div>
 
{
  "size": "base",
  "element": null,
  "dividerText": null,
  "classes": null
}
  • Content: 
    .kx-divider__txt {
    @include px(base);
}

.kx-divider {
    @include flex;
    @include align-items-center;
    width: 100%;

    &:before,
    &:after {
        content: '';
        flex: 1 1 auto;
        height: rem-calc(1);
        background-color: $color-divider-bg;
    }
}

.kx-divider--size-nano {
    @include my(nano);
}

.kx-divider--size-tiny {
    @include my(tiny);
}

.kx-divider--size-mini {
    @include my(mini);
}

.kx-divider--size-small {
    @include my(small);
}

.kx-divider--size-base {
    @include my(base);
}

.kx-divider--size-moderate {
    @include my(moderate);
}

.kx-divider--size-medium {
    @include my(medium);
}

.kx-divider--size-large {
    @include my(large);
}
  • URL: /components/raw/divider/_divider.scss
  • Filesystem Path: src\components\01-divider\_divider.scss
  • Size: 763 Bytes

Dividers

Dividers can be used to separate groups of related content.

Dividers does not add any semantic value to you HTML. They funtion only as visual dividers. To use semantic sectioning of content, use the <hr>-element (horizontal rule):

<p>Content foo</p>
<hr>
<p>Content bar</p>

The <hr> actually means “end of one section, start of another”, which semantically is kind of the same as using <section></section>-elements for structuring content. <hr> is a bit more for thematic breaks, such as separating different topics within a section of prose. You can use it anywhere you can use a <p>.

Note: The <hr>-element is visually styled as the <div class="kx-divider kx-divider--size-large"></div>*.

horizontal rule:

divider:

Modifiers

If you choose to use the visual kx-divider component, you can also add modifers for different amounts of spacing above and below (margins):

  • .kx-divider--size-none: 0px
  • .kx-divider--size-nano: 2px
  • .kx-divider--size-tiny: 4px
  • .kx-divider--size-mini: 8px
  • .kx-divider--size-small: 12px
  • .kx-divider--size-base: 16px
  • .kx-divider--size-moderate: 20px
  • .kx-divider--size-medium: 24px
  • .kx-divider--size-large: 32px

Dividers with text

Since the kx-divider component actually is a <div></div>, it can contain content. By adding text to it, you get a nice centered text on the divider-line:

Divider text

The code looks like this:

<div class="kx-divider kx-divider--size-large"><span class="kx-divider__txt">Divider text</span></div>

Example

OR

Above is a simple example of how a divider is used to separate two section of a form. The first section is fow users with an existing account, the last for new customers.