# Content Separator

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <div class="content-separator">
        <time class="content-separator__duration duration" datetime="P8M">8 Min. Lesedauer</time>
    </div>

    <div class="content-separator">
        <time class="content-separator__date date" datetime="2017-06-26">26. Juni 2017</time>
        <hr class="content-separator__separator" />
        <time class="content-separator__duration duration" datetime="P8M">8 Min. Lesedauer</time>
    </div>

    <div class="demo demo--inverted">
        <div class="content-separator content-seperator--inverted">
            <time class="content-separator__date date" datetime="2017-06-26">26. Juni 2017</time>
            <hr class="content-separator__separator" />
            <time class="content-separator__duration duration" datetime="P8M">8 Min. Lesedauer</time>
        </div>
    </div>

`
`

    <div class="content-separator">
        <time class="content-separator__duration duration" datetime="P8M">8 Min. Lesedauer</time>
    </div>

    <div class="content-separator">
        <time class="content-separator__date date" datetime="2017-06-26">26. Juni 2017</time>
        <hr class="content-separator__separator" />
        <time class="content-separator__duration duration" datetime="P8M">8 Min. Lesedauer</time>
    </div>

    <div class="demo demo--inverted">
        <div class="content-separator content-seperator--inverted">
            <time class="content-separator__date date" datetime="2017-06-26">26. Juni 2017</time>
            <hr class="content-separator__separator" />
            <time class="content-separator__duration duration" datetime="P8M">8 Min. Lesedauer</time>
        </div>
    </div>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      //
      // Content Separator
      //

      // Component specific variables
      $border-position: calc($font-size-base / 2);

      // Component definition
      .content-separator {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;

        white-space: nowrap;
      }

      // Both subcomponents overlap the border of its parent component by
      // having a small padding and a white background color.
      .content-separator__date,
      .content-separator__duration {
        display: inline-block;

        padding-right: $spacer-xs;
        padding-left: $spacer-xs;

        line-height: 1;
        color: $content-seperator-text-color;

        background-color: $box-shadow-color-light;
      }

      .content-separator__separator {
        transform: rotate(90deg);

        width: $spacer-sm;
        height: 2px;
        margin: $spacer-sm 0;

        background-color: $content-seperator-text-color;
        border: 0;
      }

      // Inverted Version
      .content-seperator--inverted {
        .content-separator__date,
        .content-separator__duration {
          color: $box-shadow-color-light;
          background-color: $content-seperator-text-color;
        }

        .content-separator__separator {
          background-color: $box-shadow-color-light;
        }
      }

      //Breakpoints
      @media screen and (min-width: $grid-breakpoint-md) {
        .content-separator {
          flex-direction: row;
          align-content: center;

          height: 1px;
          min-height: $font-size-base;
          // The border in the middle of the component is realized with
          // a stack of two inset box-shadows the first one is white
          // and reaches from the top to the middle of the baseline.
          // The second box-shadow is 1px taller than the first one,
          // resulting in a single line.
          box-shadow:
            $box-shadow-color-light 0 $border-position 0 0 inset,
            $box-shadow-color-dark 0 calc(#{$border-position} + 1px) 0 0 inset;
        }

        .content-seperator--inverted {
          // The border in the middle of the component is realized with
          // a stack of two inset box-shadows the first one is white
          // and reaches from the top to the middle of the baseline.
          // The second box-shadow is 1px taller than the first one,
          // resulting in a single line.
          box-shadow:
            $box-shadow-color-dark 0 $border-position 0 0 inset,
            $box-shadow-color-light 0 calc(#{$border-position} + 1px) 0 0 inset;
        }

        .content-separator__separator {
          transform: rotate(180deg);
          margin: 0;
        }
      }

  `
- URL: /components/raw/content-separator/_content-separator.scss
- Filesystem Path: components/04-molecules/content-separator/_content-separator.scss
- Size: 2.3 KB

- Handle: @content-separator
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/content-separator/content-separator.html

No notes defined.