Copy environment

Picture

<div class="picture  ">
    <div class="picture__pattern picture__pattern--orange"></div>
    <div class="image image--fluid image--background picture__image">
        <div class="image__inner">
            <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20216%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/320x216 320w, //placehold.it/640x432 640w" data-sizes="auto" alt="" class="image__img lazyload">
            <noscript>
                <img src="//placehold.it/320x216" srcset="//placehold.it/320x216 320w, //placehold.it/640x432 640w" sizes="100vw" alt="" class="image__img">
            </noscript>
        </div>
    </div>
    <div class="picture__pattern picture__pattern--green"></div>
</div>
{
  "language": "en-US"
}

Double

<div class="picture  picture--double">
    <div class="picture__pattern picture__pattern--grey"></div>
    <div class="picture__images">
        <div class="image image--fluid image--background picture__image">
            <div class="image__inner">
                <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20278%20186%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/278x186 278w, //placehold.it/556x372 556w" data-sizes="auto" alt="" class="image__img lazyload">
                <noscript>
                <img src="//placehold.it/278x186" srcset="//placehold.it/278x186 278w, //placehold.it/556x372 556w" sizes="100vw" alt="" class="image__img">
            </noscript>
            </div>
        </div>
        <div class="picture__pattern picture__pattern--yellow"></div>
        <div class="image image--fluid image--background picture__image picture__image--second">
            <div class="image__inner">
                <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20278%20186%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/278x186 278w, //placehold.it/556x372 556w" data-sizes="auto" alt="" class="image__img lazyload">
                <noscript>
                <img src="//placehold.it/278x186" srcset="//placehold.it/278x186 278w, //placehold.it/556x372 556w" sizes="100vw" alt="" class="image__img">
            </noscript>
            </div>
        </div>
    </div>
</div>
{
  "language": "en-US",
  "modifier": "picture--double",
  "data": {
    "image2": true
  }
}
  • Handle: @picture--double
  • Tags:
  • Variants (2): default, double
  • Preview:
  • Filesystem Path: src/patterns/components/picture/picture.twig
  • References (1): @image