HAS Green Academy styleguide

Image: Video Embed

1179 × 333 
<picture>
    <img class="c-img  lazyload  c-video-embed__image" data-srcset="https://via.placeholder.com/1600x900 1600w, https://via.placeholder.com/800x450 800w, " data-src="https://via.placeholder.com/160x90" alt="" sizes="auto" width="160" height="90">
</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://via.placeholder.com/160x90",
  "lazy": true,
  "width": 160,
  "height": 90,
  "srcset": [
    {
      "src": "https://via.placeholder.com/1600x900",
      "width": 1600
    },
    {
      "src": "https://via.placeholder.com/800x450",
      "width": 800
    }
  ],
  "class": "c-video-embed__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.