Image

<div class="lazyload-wrapper ">
    <img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
<div class="lazyload-wrapper {{ wrapperClass }}">
    <img
        class="image lazyload {{ class }}"
        src="{{ src }}"
        data-src="{{ dataSrc }}"
        alt="{{ alt }}"
        {{ attributes }}
    >
</div>
{
  "src": "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=",
  "dataSrc": "/images/banner/banner-480_480.png",
  "alt": "image alt text"
}
  • Content:
    $image__width                   : 100% !default;
    $image__transition              : $transition-fade !default;
    $image__wrapper-background-color: $white !default;
    
    .image {
        display: block;
        width: $image__width;
        max-width: $image__width;
        transition: $image__transition;
    
        &.lazyload,
        &.lazyloading {
            opacity: 0;
        }
    
        &.lazyloaded {
            opacity: 1;
        }
    }
    
    img,
    picture {
        @extend .image;
    }
    
    .lazyload-wrapper {
        position: relative;
        background-color: $image__wrapper-background-color;
        transition: $transition-base;
    }
    
  • URL: /components/raw/image/_image.scss
  • Filesystem Path: build/components/Molecules/image/_image.scss
  • Size: 569 Bytes

There are no notes for this item.