Foehn Design System

Image: Default 

<img src="/assets/img/picture-960x640.jpg" srcset="../../assets/img/picture-320x213.jpg 320w, ../../assets/img/picture-540x360.jpg 540w, ../../assets/img/picture-720x480.jpg 720w, ../../assets/img/picture-960x640.jpg 960w, ../../assets/img/picture-1140x760.jpg 1140w" alt="Alternative text">
 
<img
    {% if class %}class="{{ class }}{% if styleModifier %} {{ styleModifier }}{% endif %}"
    {% elif styleModifier %} class="{{ styleModifier }}" {% endif %}
    src="{{ src }}"
    {%if srcset %}srcset="
      {%- for item in srcset -%}
      {{ item.file }} {{ item.width }}{% if not loop.last %}, {% endif %}
      {%- endfor -%}
    "{% endif %} alt="{{ alt }}">
 
{
  "src": "/assets/img/picture-960x640.jpg",
  "alt": "Alternative text",
  "srcset": [
    {
      "width": "320w",
      "file": "../../assets/img/picture-320x213.jpg"
    },
    {
      "width": "540w",
      "file": "../../assets/img/picture-540x360.jpg"
    },
    {
      "width": "720w",
      "file": "../../assets/img/picture-720x480.jpg"
    },
    {
      "width": "960w",
      "file": "../../assets/img/picture-960x640.jpg"
    },
    {
      "width": "1140w",
      "file": "../../assets/img/picture-1140x760.jpg"
    }
  ]
}
  • Content: 
    @charset 'UTF-8';

/**
 * Image
 *
 * 1. Do not print full size images
 */
@media print {
  img {
    max-width: 500px !important; /* [1] */
  }
}

.img-desaturate {
  filter: grayscale(100%);
}
  • URL: /components/raw/image/_image.scss
  • Filesystem Path: src/components/01-atoms/images/image/_image.scss
  • Size: 195 Bytes

Sizes

Here are the recommended image width for the srcset attribute:

  • 320px
  • 540px
  • 720px
  • 960px
  • 1140px
<img
    
    src="/assets/img/picture-960x640.jpg"
    srcset="../../assets/img/picture-320x213.jpg 320w, ../../assets/img/picture-540x360.jpg 540w, ../../assets/img/picture-720x480.jpg 720w, ../../assets/img/picture-960x640.jpg 960w, ../../assets/img/picture-1140x760.jpg 1140w" alt="Alternative text">