HAS Green Academy styleguide

Image: Card

1179 × 333 
<picture>
    <img class="c-img  lazyload  " data-srcset="https://via.placeholder.com/320x180 320w, https://via.placeholder.com/640x360 640w, " data-src="https://via.placeholder.com/320x180" alt="" sizes="auto" width="320" height="180">
</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/320x180",
  "lazy": true,
  "width": 320,
  "height": 180,
  "srcset": [
    {
      "src": "https://via.placeholder.com/320x180",
      "width": 320
    },
    {
      "src": "https://via.placeholder.com/640x360",
      "width": 640
    }
  ]
}
  • 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.