Sidelines Text Divider

By Rafi

How do I use This?

A text divider to separate two sections of content with text.

HTML

<h2 class="type-sidelines double"><span>$4,000</span></h2>
<h2 class="type-sidelines"><span>OR</span></h2>
<h2 class="type-sidelines custom"><span>$10,000</span></h2>
<h2 class="type-sidelines custom-2"><span>DIVIDE</span></h2>

$sidelines-text-padding: 0.5em !default;
$sidelines-line-thickness: 1px !default;
$sidelines-line-length: 9999px !default;
$sidelines-line-color: null !default;
$sidelines-line-style: solid !default;
$sidelines-double-line: false !default;
$sidelines-double-line-spacing: 0.5em !default;

@mixin sidelines(
  $text-padding: $sidelines-text-padding,
  $line-thickness: $sidelines-line-thickness,
  $line-length: $sidelines-line-length,
  $line-color: $sidelines-line-color,
  $line-style: $sidelines-line-style,
  $double-line: $sidelines-double-line,
  $double-line-spacing: $sidelines-double-line-spacing ) {

  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;

  span {
    display: inline-block;
    position: relative;
    padding-left: $text-padding;
    padding-right: $text-padding;

    &:before,
    &:after {
      content: '';
      position: absolute;
      height: 100%;
      width: $line-length;
      top: 50%;
      border-top-style: $line-style;
      border-top-width: $line-thickness;

      @if $line-color != null {
        border-top-color: $line-color;
      }

      @if $double-line {
        border-bottom-style: $line-style;
        border-bottom-width: $line-thickness;
        border-bottom-color: $line-color;
        height: $double-line-spacing;
        margin-top: -($double-line-spacing/2);
      } @else if $line-thickness > 1 {
        margin-top: -(floor($line-thickness/2));
      }
    }

    &:before {
      right: 100%;
    }

    &:after {
      left: 100%;
    }
  }
}

.type-sidelines {
  @include sidelines();
}

.double {
  @include sidelines(
    $double-line: true
  );
}

.custom {
  @include sidelines(
    $text-padding: 20px,
    $line-length: 100%,
    $line-color: #2980b9,
    $line-thickness: 4px,
    $line-style: dotted
  );
}

.custom-2 {
  @include sidelines(
    $line-color: #27ae60,
    $line-thickness: 4px
  );
}

.type-sidelines {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

.type-sidelines span {
  display: inline-block;
  position: relative;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.type-sidelines span:before, .type-sidelines span:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 9999px;
  top: 50%;
  border-top-style: solid;
  border-top-width: 1px;
}

.type-sidelines span:before {
  right: 100%;
}

.type-sidelines span:after {
  left: 100%;
}

.double {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

.double span {
  display: inline-block;
  position: relative;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.double span:before, .double span:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 9999px;
  top: 50%;
  border-top-style: solid;
  border-top-width: 1px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  height: 0.5em;
  margin-top: -0.25em;
}

.double span:before {
  right: 100%;
}

.double span:after {
  left: 100%;
}

.custom {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

.custom span {
  display: inline-block;
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}

.custom span:before, .custom span:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 50%;
  border-top-style: dotted;
  border-top-width: 4px;
  border-top-color: #2980b9;
  margin-top: -2px;
}

.custom span:before {
  right: 100%;
}

.custom span:after {
  left: 100%;
}

.custom-2 {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

.custom-2 span {
  display: inline-block;
  position: relative;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.custom-2 span:before, .custom-2 span:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 9999px;
  top: 50%;
  border-top-style: solid;
  border-top-width: 4px;
  border-top-color: #27ae60;
  margin-top: -2px;
}

.custom-2 span:before {
  right: 100%;
}

.custom-2 span:after {
  left: 100%;
}

Sidelines Text Divider

By Rafi

Large Article Header

Product Image Gallery

Responsive Vertical Timeline

Sidelines Text Divider

By Rafi

Similar Building Blocks

Large Article Header

Product Image Gallery

Responsive Vertical Timeline