<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.