side-lined

view source

Create horizontal lines extending from either side of center-aligned text.

use-name
scut-side-lined
type
mixin, with default-values placeholder
arguments
  1. $height
    default
    1px

    The height of the lines.

  2. $space
    default
    0.5em

    Horizontal spacing between the text and the lines (on both sides).

  3. $color
    default
    inherit

    The color of the lines.

  4. $style
    default
    solid

    The border-style of the lines.

  5. $v-adjust

    Vertical adjustment to the lines, adding space from the bottom. See examples below.

  6. $double

    Double your lines by adding a value for the distance between the two lines you want.

Woman- and mankind have always loved this flourish. Look at the examples below. You want to do that!

By default, the lines will be vertically aligned with the text's centerline — but sometimes that will look off to your discerning eye, and you'll want to tweak that vertical position. So add some height to the $v-adjust argument, which will push your lines up, away from the bottom of the element.

By default, the mixin produces one line; but if you add a height value to the $double argument, you'll get two lines (separated by that height). (You could also use a $style of double, which would act the same as any double border-style.)

example

SCSS

.eg-side-lined-1 {
  @include scut-side-lined;
  // or @extend %scut-side-lined;
}
.eg-side-lined-2 {
  font-size: 2em;
  @include scut-side-lined(0.3em, 1em, $eg-light, $v-adjust: 0.1em);
}
.eg-side-lined-3 {
  @include scut-side-lined($double: 0.3em, $color: $eg-muted, $v-adjust: 0.05em);
}
.eg-side-lined-4 {
  @include scut-side-lined($style: dotted);
}

Result

Variation 1

Variation 2

Variation 3

Variation 4