← Superkube / Documentation 1.5
Modules

Line

This module helps to create different styles of lines with the hr tag.

Default #

Superkube generates line styles based on the properties specified in the $lines map. By default Superkube sets a style for the hr tag without class:

$lines: (
    default: (
        margin-top: 1.5em,
        margin-bottom: 1.5em,
        color: color(line, default),
        height: 1px,
        width: 100%,
        align: left,
        style: solid
    )
);

The line is used in HTML like this:

<hr>

Custom line #

Add a color to the $colors map to create your own line style:

// Color
$colors: (
    ...
    line: (
        strong: palette(black)
    )
    ...
);

// Style
$lines: (
    ...
    strong: (
        color: color(line, strong),
        height: 2px
    )
    ...
);

As a result Superkube will generate a line class line-strong. Use it in HTML:

<hr class="line-strong">