<section>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <article class="text-box overlap-item overlap-item--above overlap-item-xs--bottom overlap-item-sm--right overlap-item-md--right">
                    <div class="text-box__inner">
                        <div class="text-box__content">
                            <h2 class="heading heading--column ">Using overlap-item</h2>

                            <p>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 &lt;div class&#x3D;&#x27;overlap-item--right&gt; will
                                overlap whatever is to the right of the element&#x27;</p>
                        </div>
                    </div>
                </article>
            </div>
            <div class="col-xs-12 col-sm-6">
                <img data-src="https://images.unsplash.com/photo-1521193652645-2c7f9df43c5c?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;934&amp;q&#x3D;80" alt="" class="image lazyload   ">
            </div>
        </div>
    </div>
</section>
<section>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                {{> @text-box textbox1 modifier="overlap-item overlap-item--above overlap-item-xs--bottom overlap-item-sm--right overlap-item-md--right" }}
            </div>
            <div class="col-xs-12 col-sm-6">
                {{ render "@image" image1 }}
            </div>
        </div>
    </div>
</section>
{
  "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: patterns/02-molecules/overlap-item/overlap-item.css
  • Size: 1.8 KB

There are no notes for this item.