Copy environment

Divider 

<div class="divider "></div>
 
<div class="divider {{modifier}}"></div>

{
  "language": "en-US"
}
  • Content: 
    .divider {
    background: #eeeeee;
    height: 1px;
    width: 100%;
    margin: 16px 0;
}

.divider--invisible {
    background: transparent;
}

.divider--xxs {
    margin: 8px 0;
}

.divider--xs {
    margin: 12px 0;
}

.divider--md {
    margin: 24px 0;
}

.divider--sm {
    margin: 28px 0;
}

.divider--lg {
    margin: 24px 0;

    @include bp(lg-min) {
        margin: 64px 0 56px;
    }
}
  • URL: /components/raw/divider/divider.scss
  • Filesystem Path: src/patterns/components/divider/divider.scss
  • Size: 398 Bytes

Invisible 

<div class="divider divider--invisible"></div>
 
<div class="divider {{modifier}}"></div>

{
  "language": "en-US",
  "modifier": "divider--invisible"
}
  • Content: 
    .divider {
    background: #eeeeee;
    height: 1px;
    width: 100%;
    margin: 16px 0;
}

.divider--invisible {
    background: transparent;
}

.divider--xxs {
    margin: 8px 0;
}

.divider--xs {
    margin: 12px 0;
}

.divider--md {
    margin: 24px 0;
}

.divider--sm {
    margin: 28px 0;
}

.divider--lg {
    margin: 24px 0;

    @include bp(lg-min) {
        margin: 64px 0 56px;
    }
}
  • URL: /components/raw/divider/divider.scss
  • Filesystem Path: src/patterns/components/divider/divider.scss
  • Size: 398 Bytes
  • Handle: @divider--invisible
  • Filesystem Path: src/patterns/components/divider/divider.twig

Sm 

<div class="divider divider--sm"></div>
 
<div class="divider {{modifier}}"></div>

{
  "language": "en-US",
  "modifier": "divider--sm"
}
  • Content: 
    .divider {
    background: #eeeeee;
    height: 1px;
    width: 100%;
    margin: 16px 0;
}

.divider--invisible {
    background: transparent;
}

.divider--xxs {
    margin: 8px 0;
}

.divider--xs {
    margin: 12px 0;
}

.divider--md {
    margin: 24px 0;
}

.divider--sm {
    margin: 28px 0;
}

.divider--lg {
    margin: 24px 0;

    @include bp(lg-min) {
        margin: 64px 0 56px;
    }
}
  • URL: /components/raw/divider/divider.scss
  • Filesystem Path: src/patterns/components/divider/divider.scss
  • Size: 398 Bytes
  • Handle: @divider--sm
  • Filesystem Path: src/patterns/components/divider/divider.twig

Lg 

<div class="divider divider--lg"></div>
 
<div class="divider {{modifier}}"></div>

{
  "language": "en-US",
  "modifier": "divider--lg"
}
  • Content: 
    .divider {
    background: #eeeeee;
    height: 1px;
    width: 100%;
    margin: 16px 0;
}

.divider--invisible {
    background: transparent;
}

.divider--xxs {
    margin: 8px 0;
}

.divider--xs {
    margin: 12px 0;
}

.divider--md {
    margin: 24px 0;
}

.divider--sm {
    margin: 28px 0;
}

.divider--lg {
    margin: 24px 0;

    @include bp(lg-min) {
        margin: 64px 0 56px;
    }
}
  • URL: /components/raw/divider/divider.scss
  • Filesystem Path: src/patterns/components/divider/divider.scss
  • Size: 398 Bytes
  • Handle: @divider--lg
  • Filesystem Path: src/patterns/components/divider/divider.twig