Component Library

Sections that can overlap 

<div class=" overlap-item overlap-item-- overlap-item-sm-- overlap-item-md-- overlap-item-lg-- overlap-item-xl--">
    <p class="paragraph  ">Overlapping content here. You can pass a direction, z-index and additional classes to this molecule. See overlapping-sections page for inspiration</p>
</div>
 
<div class="{{class}} overlap-item overlap-item--{{z-index}} overlap-item-sm--{{direction}} overlap-item-md--{{direction}} overlap-item-lg--{{direction}} overlap-item-xl--{{direction}}">
    {{#block "overlap-item__content" }}
        {{> @paragraph text="Overlapping content here. You can pass a direction, z-index and additional classes to this molecule. See overlapping-sections page for inspiration"}}
    {{/block}}
</div>
 
{
  "textbox1": {
    "heading": {
      "text": "Using overlap-item"
    },
    "textBoxContent": "The idea behind overlap-item is that you can apply it as a class (see overlap-item.css for directions) and have it overlap either top, right, bottom or left. For example, a <div class='overlap-item--right> will overlap whatever is to the right of the element'"
  },
  "button": {
    "text": "Overlap section to the right"
  },
  "image1": {
    "url": "https://images.unsplash.com/photo-1521193652645-2c7f9df43c5c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
  }
}
  • Content: 
    .overlap-item {
    position: relative;

    &--above {
        z-index: 1;
    }

    &--below {
        z-index: 0;
    }

    @media (--viewport-xs-min) {
        &-xs {
            &--top {
                top: -12vw;
            }

            &--right {
                right: -12vw;
            }

            &--bottom {
                bottom: -12vw;
            }

            &--left {
                left: -12vw;
            }
        }
    }

    @media (--viewport-sm-min) {
        &-sm {
            &--top {
                top: -10vw;
            }

            &--right {
                right: -10vw;
            }

            &--bottom {
                bottom: -10vw;
            }

            &--left {
                left: -10vw;
            }
        }
    }

    @media (--viewport-md-min) {
        &-md {
            &--top {
                top: -8vw;
            }

            &--right {
                right: -8vw;
            }

            &--bottom {
                bottom: -8vw;
            }

            &--left {
                left: -8vw;
            }
        }
    }

    @media (--viewport-lg-min) {
        &-lg {
            &--top {
                top: -6vw;
            }

            &--right {
                right: -6vw;
            }

            &--bottom {
                bottom: -6vw;
            }

            &--left {
                left: -6vw;
            }
        }
    }

    @media (--viewport-xl-min) {
        &-xl {
            &--top {
                top: -4vw;
            }

            &--right {
                right: -4vw;
            }

            &--bottom {
                bottom: -4vw;
            }

            &--left {
                left: -4vw;
            }
        }
    }
}
  • URL: /components/raw/overlap-item/overlap-item.css
  • Filesystem Path: src/02-molecules/overlap-item/overlap-item.css
  • Size: 1.8 KB

There are no notes for this item.