Copy environment

Image 

<figure class="image  sg-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%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" class="image__img lazyload">

</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}

    <img
        loading={% if eager and sizes %}"eager"{% else %}"lazy"{% endif %}
        src="{{ placeholderSrc }}"
        {% if eager and sizes %}
            srcset="{{ data.srcset }}"
            sizes="{{ sizes }}"
        {% else %}
            data-srcset="{{ data.srcset }}"
            data-sizes="auto"
        {% endif %}
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img {% if not eager or not sizes %}lazyload{% endif %}"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source
                    srcset={% if eager and sizes %}"{{ source.srcset }}"{% else %}"{{ sourcePlaceholder }}"{% endif %}
                    data-srcset="{{ source.srcset }}"
                    media="{{ media[loop.index0] }}"
                >
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
            {% if anchorAttributes %}{{ anchorAttributes }}{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption and not noCaption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "class": "sg-image",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    }
  }
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    display: block;

    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--full & {
        width: 100%;
    }

    .image--round & {
        border-radius: $border-radius-round;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.image__caption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.28;
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 767 Bytes

Fluid 

<figure class="image image--fluid sg-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%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" class="image__img lazyload">

</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}

    <img
        loading={% if eager and sizes %}"eager"{% else %}"lazy"{% endif %}
        src="{{ placeholderSrc }}"
        {% if eager and sizes %}
            srcset="{{ data.srcset }}"
            sizes="{{ sizes }}"
        {% else %}
            data-srcset="{{ data.srcset }}"
            data-sizes="auto"
        {% endif %}
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img {% if not eager or not sizes %}lazyload{% endif %}"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source
                    srcset={% if eager and sizes %}"{{ source.srcset }}"{% else %}"{{ sourcePlaceholder }}"{% endif %}
                    data-srcset="{{ source.srcset }}"
                    media="{{ media[loop.index0] }}"
                >
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
            {% if anchorAttributes %}{{ anchorAttributes }}{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption and not noCaption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "class": "sg-image",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    }
  },
  "modifier": "image--fluid"
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    display: block;

    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--full & {
        width: 100%;
    }

    .image--round & {
        border-radius: $border-radius-round;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.image__caption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.28;
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 767 Bytes
  • Handle: @image--fluid
  • Filesystem Path: src/patterns/components/image/image.twig

Picture 

<figure class="image  sg-image">
    <picture class="image__picture">
        <source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20175%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x175 100w, //via.placeholder.com/200x350 200w" media="(min-width: 1170px)">
        <source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20150%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x150 100w, //via.placeholder.com/200x300 200w" media="(min-width: 1024px)">
        <source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20125%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x125 100w, //via.placeholder.com/200x250 200w" media="(min-width: 768px)">

        <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" class="image__img lazyload">

    </picture>

</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}

    <img
        loading={% if eager and sizes %}"eager"{% else %}"lazy"{% endif %}
        src="{{ placeholderSrc }}"
        {% if eager and sizes %}
            srcset="{{ data.srcset }}"
            sizes="{{ sizes }}"
        {% else %}
            data-srcset="{{ data.srcset }}"
            data-sizes="auto"
        {% endif %}
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img {% if not eager or not sizes %}lazyload{% endif %}"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source
                    srcset={% if eager and sizes %}"{{ source.srcset }}"{% else %}"{{ sourcePlaceholder }}"{% endif %}
                    data-srcset="{{ source.srcset }}"
                    media="{{ media[loop.index0] }}"
                >
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
            {% if anchorAttributes %}{{ anchorAttributes }}{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption and not noCaption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "class": "sg-image",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    },
    "sources": [
      {
        "srcset": "//via.placeholder.com/100x175 100w, //via.placeholder.com/200x350 200w",
        "aspectRatio": {
          "width": 100,
          "height": 175
        }
      },
      {
        "srcset": "//via.placeholder.com/100x150 100w, //via.placeholder.com/200x300 200w",
        "aspectRatio": {
          "width": 100,
          "height": 150
        }
      },
      {
        "srcset": "//via.placeholder.com/100x125 100w, //via.placeholder.com/200x250 200w",
        "aspectRatio": {
          "width": 100,
          "height": 125
        }
      }
    ]
  },
  "media": [
    "(min-width: 1170px)",
    "(min-width: 1024px)",
    "(min-width: 768px)"
  ]
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    display: block;

    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--full & {
        width: 100%;
    }

    .image--round & {
        border-radius: $border-radius-round;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.image__caption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.28;
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 767 Bytes
  • Handle: @image--picture
  • Filesystem Path: src/patterns/components/image/image.twig

Caption 

<figure class="image  sg-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%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" class="image__img lazyload">

    <figcaption class="image__caption">this is a caption</figcaption>
</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}

    <img
        loading={% if eager and sizes %}"eager"{% else %}"lazy"{% endif %}
        src="{{ placeholderSrc }}"
        {% if eager and sizes %}
            srcset="{{ data.srcset }}"
            sizes="{{ sizes }}"
        {% else %}
            data-srcset="{{ data.srcset }}"
            data-sizes="auto"
        {% endif %}
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img {% if not eager or not sizes %}lazyload{% endif %}"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source
                    srcset={% if eager and sizes %}"{{ source.srcset }}"{% else %}"{{ sourcePlaceholder }}"{% endif %}
                    data-srcset="{{ source.srcset }}"
                    media="{{ media[loop.index0] }}"
                >
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
            {% if anchorAttributes %}{{ anchorAttributes }}{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption and not noCaption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "class": "sg-image",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    },
    "caption": "this is a caption"
  }
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    display: block;

    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--full & {
        width: 100%;
    }

    .image--round & {
        border-radius: $border-radius-round;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.image__caption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.28;
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 767 Bytes
  • Handle: @image--caption
  • Filesystem Path: src/patterns/components/image/image.twig

Width

limit maximum render width of image by adding a width prop to data

<figure class="image  sg-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%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" width="300" class="image__img lazyload">

</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}

    <img
        loading={% if eager and sizes %}"eager"{% else %}"lazy"{% endif %}
        src="{{ placeholderSrc }}"
        {% if eager and sizes %}
            srcset="{{ data.srcset }}"
            sizes="{{ sizes }}"
        {% else %}
            data-srcset="{{ data.srcset }}"
            data-sizes="auto"
        {% endif %}
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img {% if not eager or not sizes %}lazyload{% endif %}"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source
                    srcset={% if eager and sizes %}"{{ source.srcset }}"{% else %}"{{ sourcePlaceholder }}"{% endif %}
                    data-srcset="{{ source.srcset }}"
                    media="{{ media[loop.index0] }}"
                >
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
            {% if anchorAttributes %}{{ anchorAttributes }}{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption and not noCaption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "class": "sg-image",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    },
    "width": 300
  }
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    display: block;

    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--full & {
        width: 100%;
    }

    .image--round & {
        border-radius: $border-radius-round;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.image__caption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.28;
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 767 Bytes
  • Handle: @image--width
  • Filesystem Path: src/patterns/components/image/image.twig

Link 

<figure class="image  sg-image">
    <a class="image__link" href="https://google.ee" target="_blank">

        <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" class="image__img lazyload">

    </a>
</figure>

Align Left 

<figure class="image image--align-left sg-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%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" width="200" class="image__img lazyload">

</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}

    <img
        loading={% if eager and sizes %}"eager"{% else %}"lazy"{% endif %}
        src="{{ placeholderSrc }}"
        {% if eager and sizes %}
            srcset="{{ data.srcset }}"
            sizes="{{ sizes }}"
        {% else %}
            data-srcset="{{ data.srcset }}"
            data-sizes="auto"
        {% endif %}
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img {% if not eager or not sizes %}lazyload{% endif %}"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source
                    srcset={% if eager and sizes %}"{{ source.srcset }}"{% else %}"{{ sourcePlaceholder }}"{% endif %}
                    data-srcset="{{ source.srcset }}"
                    media="{{ media[loop.index0] }}"
                >
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
            {% if anchorAttributes %}{{ anchorAttributes }}{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption and not noCaption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "class": "sg-image",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    },
    "width": 200
  },
  "modifier": "image--align-left"
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    display: block;

    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--full & {
        width: 100%;
    }

    .image--round & {
        border-radius: $border-radius-round;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.image__caption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.28;
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 767 Bytes
  • Handle: @image--align-left
  • Filesystem Path: src/patterns/components/image/image.twig

Align Right 

<figure class="image image--align-right sg-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%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" width="200" class="image__img lazyload">

</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}

    <img
        loading={% if eager and sizes %}"eager"{% else %}"lazy"{% endif %}
        src="{{ placeholderSrc }}"
        {% if eager and sizes %}
            srcset="{{ data.srcset }}"
            sizes="{{ sizes }}"
        {% else %}
            data-srcset="{{ data.srcset }}"
            data-sizes="auto"
        {% endif %}
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img {% if not eager or not sizes %}lazyload{% endif %}"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source
                    srcset={% if eager and sizes %}"{{ source.srcset }}"{% else %}"{{ sourcePlaceholder }}"{% endif %}
                    data-srcset="{{ source.srcset }}"
                    media="{{ media[loop.index0] }}"
                >
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
            {% if anchorAttributes %}{{ anchorAttributes }}{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption and not noCaption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "class": "sg-image",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    },
    "width": 200
  },
  "modifier": "image--align-right"
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    display: block;

    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--full & {
        width: 100%;
    }

    .image--round & {
        border-radius: $border-radius-round;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.image__caption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.28;
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 767 Bytes
  • Handle: @image--align-right
  • Filesystem Path: src/patterns/components/image/image.twig

Align Center 

<figure class="image image--align-center sg-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%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" width="200" class="image__img lazyload">

</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}

    <img
        loading={% if eager and sizes %}"eager"{% else %}"lazy"{% endif %}
        src="{{ placeholderSrc }}"
        {% if eager and sizes %}
            srcset="{{ data.srcset }}"
            sizes="{{ sizes }}"
        {% else %}
            data-srcset="{{ data.srcset }}"
            data-sizes="auto"
        {% endif %}
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img {% if not eager or not sizes %}lazyload{% endif %}"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source
                    srcset={% if eager and sizes %}"{{ source.srcset }}"{% else %}"{{ sourcePlaceholder }}"{% endif %}
                    data-srcset="{{ source.srcset }}"
                    media="{{ media[loop.index0] }}"
                >
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
            {% if anchorAttributes %}{{ anchorAttributes }}{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption and not noCaption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "class": "sg-image",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    },
    "width": 200
  },
  "modifier": "image--align-center"
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    display: block;

    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--full & {
        width: 100%;
    }

    .image--round & {
        border-radius: $border-radius-round;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.image__caption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.28;
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 767 Bytes
  • Handle: @image--align-center
  • Filesystem Path: src/patterns/components/image/image.twig

Full Width 

<figure class="image image--full sg-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%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" width="200" class="image__img lazyload">

</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}

    <img
        loading={% if eager and sizes %}"eager"{% else %}"lazy"{% endif %}
        src="{{ placeholderSrc }}"
        {% if eager and sizes %}
            srcset="{{ data.srcset }}"
            sizes="{{ sizes }}"
        {% else %}
            data-srcset="{{ data.srcset }}"
            data-sizes="auto"
        {% endif %}
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img {% if not eager or not sizes %}lazyload{% endif %}"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source
                    srcset={% if eager and sizes %}"{{ source.srcset }}"{% else %}"{{ sourcePlaceholder }}"{% endif %}
                    data-srcset="{{ source.srcset }}"
                    media="{{ media[loop.index0] }}"
                >
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
            {% if anchorAttributes %}{{ anchorAttributes }}{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption and not noCaption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "class": "sg-image",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    },
    "width": 200
  },
  "modifier": "image--full"
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    display: block;

    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--full & {
        width: 100%;
    }

    .image--round & {
        border-radius: $border-radius-round;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.image__caption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.28;
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 767 Bytes
  • Handle: @image--full-width
  • Filesystem Path: src/patterns/components/image/image.twig

Round 

<figure class="image image--round sg-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%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" width="200" class="image__img lazyload">

</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}

    <img
        loading={% if eager and sizes %}"eager"{% else %}"lazy"{% endif %}
        src="{{ placeholderSrc }}"
        {% if eager and sizes %}
            srcset="{{ data.srcset }}"
            sizes="{{ sizes }}"
        {% else %}
            data-srcset="{{ data.srcset }}"
            data-sizes="auto"
        {% endif %}
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img {% if not eager or not sizes %}lazyload{% endif %}"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source
                    srcset={% if eager and sizes %}"{{ source.srcset }}"{% else %}"{{ sourcePlaceholder }}"{% endif %}
                    data-srcset="{{ source.srcset }}"
                    media="{{ media[loop.index0] }}"
                >
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
            {% if anchorAttributes %}{{ anchorAttributes }}{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption and not noCaption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "class": "sg-image",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    },
    "width": 200
  },
  "modifier": "image--round"
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    display: block;

    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--full & {
        width: 100%;
    }

    .image--round & {
        border-radius: $border-radius-round;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.image__caption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.28;
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 767 Bytes
  • Handle: @image--round
  • Filesystem Path: src/patterns/components/image/image.twig