HAS Green Academy styleguide

Image: Media Experience

1179 × 333 
<picture>
    <img class="c-img  lazyload  c-media-experience__image" data-srcset="https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy&#x3D;0.503208513960338,0.5411104104798846&amp;width&#x3D;375&amp;height&#x3D;375&amp;rnd&#x3D;133032324600500000 375w, https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy&#x3D;0.503208513960338,0.5411104104798846&amp;width&#x3D;767&amp;height&#x3D;767&amp;rnd&#x3D;133032324600500000 767w, https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy&#x3D;0.503208513960338,0.5411104104798846&amp;width&#x3D;1280&amp;height&#x3D;587&amp;rnd&#x3D;133032324600500000 1280w, https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy&#x3D;0.503208513960338,0.5411104104798846&amp;width&#x3D;1920&amp;height&#x3D;880&amp;rnd&#x3D;133032324600500000 1920w, " data-src="https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy&#x3D;0.503208513960338,0.5411104104798846&amp;width&#x3D;1920&amp;height&#x3D;880&amp;rnd&#x3D;133032324600500000" alt="" sizes="auto" width="1920" height="880">
</picture>
 
<picture>
  <img
    class="c-img  lazyload  {{ class }}"
    {{# if srcset }}
    {{# if lazy }}data-{{/if}}srcset="{{#each srcset }}{{ src }} {{ width }}w, {{/each}}"
    {{/if}}
    {{# if lazy }}data-{{/if}}src="{{ src }}"
    alt="{{ alt }}"
    sizes="auto"
    width="{{ width }}"
    height="{{ height }}"
  >
</picture>
 
{
  "alt": "",
  "src": "https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy=0.503208513960338,0.5411104104798846&width=1920&height=880&rnd=133032324600500000",
  "lazy": true,
  "width": 1920,
  "height": 880,
  "srcset": [
    {
      "src": "https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy=0.503208513960338,0.5411104104798846&width=375&height=375&rnd=133032324600500000",
      "width": 375,
      "height": 375
    },
    {
      "src": "https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy=0.503208513960338,0.5411104104798846&width=767&height=767&rnd=133032324600500000",
      "width": 767,
      "height": 767
    },
    {
      "src": "https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy=0.503208513960338,0.5411104104798846&width=1280&height=587&rnd=133032324600500000",
      "width": 1280,
      "height": 587
    },
    {
      "src": "https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy=0.503208513960338,0.5411104104798846&width=1920&height=880&rnd=133032324600500000",
      "width": 1920,
      "height": 880
    }
  ],
  "class": "c-media-experience__image"
}
  • Content: 
    /*  =========================================================================
    Atoms.Image
    ========================================================================= */

/*  BLock
    ========================================================================= */

.c-img {
  inline-size: 100%;
}



/*  Modifier
    ========================================================================= */

.c-img--portrait {
  inline-size: 7rem;
  block-size: 7rem;
  border-radius: 50%;
  object-fit: cover;
}
  • URL: /components/raw/atoms-image/_image.scss
  • Filesystem Path: src/components/atoms/image/_image.scss
  • Size: 503 Bytes

No notes defined.