Copy environment

Image Module 

<section class="section      image-module ">
    <div class="image-module__container">
        <figure class="image image--full image-module__image">

            <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/280x155 280w, //via.placeholder.com/560x310 560w, //via.placeholder.com/840x465 840w, //via.placeholder.com/1120x620 1120w, //via.placeholder.com/1400x775 1400w, //via.placeholder.com/1680x930 1680w, //via.placeholder.com/1960x1085 1960w, //via.placeholder.com/2240x1240 2240w" data-sizes="auto" alt="" class="image__img lazyload">

        </figure>
    </div>

</section>
 
{% set BEM %}
    image-module
    {%- if data.isWide %} image-module--wide{% endif %}
{% endset %}

{% set imageHtml %}
    <div class="image-module__container">
        {% include '@image' with {
                data: data.image|srcset('280x155'),
                class: 'image-module__image',
                modifier: 'image--full'
            }
        %}
    </div>
{% endset %}

{% if data.isWide %}
    {% set wideContent %}
        {{ imageHtml }}
    {% endset %}
{% else %}
    {% set normalContent %}
        {{ imageHtml }}
    {% endset %}
{% endif %}

{% if data.image %}
    {% include '@section' with {
            class: BEM,
            sectionContent: normalContent,
            sectionWideContent: wideContent
        }
    %}
{% endif %}
 
{
  "language": "en-US",
  "data": {
    "image": true
  }
}
  • Content: 
    .image-module__container {
    width: 100%;
}

.image-module__image {
    width: 100%;

    .image-module--wide & img {
        max-height: $image-module-max-height;
        width: 100%;
        object-fit: cover;
        object-position: center;
    }
}
  • URL: /components/raw/image-module/image-module.scss
  • Filesystem Path: src/patterns/modules/image-module/image-module.scss
  • Size: 255 Bytes
  • Handle: @image-module--default
  • Filesystem Path: src/patterns/modules/image-module/image-module.twig
  • References (2): @image, @section

Wide 

<section class="section      image-module image-module--wide ">

</section>
 
{% set BEM %}
    image-module
    {%- if data.isWide %} image-module--wide{% endif %}
{% endset %}

{% set imageHtml %}
    <div class="image-module__container">
        {% include '@image' with {
                data: data.image|srcset('280x155'),
                class: 'image-module__image',
                modifier: 'image--full'
            }
        %}
    </div>
{% endset %}

{% if data.isWide %}
    {% set wideContent %}
        {{ imageHtml }}
    {% endset %}
{% else %}
    {% set normalContent %}
        {{ imageHtml }}
    {% endset %}
{% endif %}

{% if data.image %}
    {% include '@section' with {
            class: BEM,
            sectionContent: normalContent,
            sectionWideContent: wideContent
        }
    %}
{% endif %}
 
{
  "language": "en-US",
  "data": {
    "image": true,
    "isWide": true
  }
}
  • Content: 
    .image-module__container {
    width: 100%;
}

.image-module__image {
    width: 100%;

    .image-module--wide & img {
        max-height: $image-module-max-height;
        width: 100%;
        object-fit: cover;
        object-position: center;
    }
}
  • URL: /components/raw/image-module/image-module.scss
  • Filesystem Path: src/patterns/modules/image-module/image-module.scss
  • Size: 255 Bytes
  • Handle: @image-module--wide
  • Filesystem Path: src/patterns/modules/image-module/image-module.twig
  • References (2): @image, @section