Foehn Design System

Image: Rounded 

<img class="rounded-circle" src="../../assets/img/avatar.jpg" 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/avatar.jpg",
  "alt": "Alternative text",
  "srcset": false,
  "class": "rounded-circle"
}
  • 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">