Foehn Design System

Image: Rounded 

<img class="rounded-circle" src="https://source.unsplash.com/random/200x200" 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": "https://source.unsplash.com/random/200x200",
  "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="https://placehold.it/960x640/ea09ff/000001?text=Default|960x640"
    srcset="https://placehold.it/320x210/d8e7ff/000001?text=320x210 320w, https://placehold.it/540x360/a4c6fc/000001?text=540x360 540w, https://placehold.it/720x480/6ba4ff/000001?text=720x480 720w, https://placehold.it/960x640/3f89ff/000001?text=960x640 960w, https://placehold.it/1140x760/0a68ff/fffffa?text=1140x760 1140w" alt="Alternative text">