Image

Image

When to use this component

Use the image component to present an image on a page.

How it works

For images, the following requirements should be followed:

  • An alt attribute is required. A short text alternative should be specified using the alt attribute. See WCAG Technique page
  • For images that are purely decorative images, the alt attributes must be empty.
  • An aspect ratio should always be provided. The default aspect ratio is 8:5.
  • When the image cannot be loaded or is not found, a placeholder is used. See the “broken image placeholder” example.
  • When there is no image to show, a placeholder is used. See the “no image placeholder” example.

The image components also adds the benefit of providing an optional caption tag.

Usage within the style guide

The image component is used in the:

{% spaceless %}
  <figure {% if modifier %} class="{{ modifier }}" {% endif %}>
    {% if ratio %}
      <div class="image-wrapper" data-ratio="{{ ratio }}">
    {% endif %}

      {% if src %}
        <img
          src="{{ src }}"
          alt="{{ alt_text }}"
          {% if modifier %}
            class="{{ modifier }}"
          {% endif %}
        />
      {% endif %}

    {% if ratio %}
      </div>
    {% endif %}

    {% if caption %}
      {% include '@figcaption' with {
          'figcaption': caption
        } %}
    {% endif %}

  </figure>
{% endspaceless %}
<!-- Default -->
<figure>
    <div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="Image alt text" /></div>
    <figcaption>Figure caption comes here.</figcaption>
</figure>

<!-- No Caption -->
<figure>
    <div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="Image alt text" /></div>
</figure>

<!-- Image Placeholder -->
<figure>
    <div class="image-wrapper" data-ratio="8:5"></div>
</figure>

<!-- Broken Image Placeholder -->
<figure>
    <div class="image-wrapper" data-ratio="8:5"><img src="http://example.com/broken-url.jpg" alt="Image alt text" /></div>
    <figcaption>Figure caption comes here.</figcaption>
</figure>

/* Default */
{
  "caption": "Figure caption comes here.",
  "src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
  "alt_text": "Image alt text",
  "ratio": "8:5"
}

/* No Caption */
{
  "caption": null,
  "src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
  "alt_text": "Image alt text",
  "ratio": "8:5"
}

/* Image Placeholder */
{
  "caption": null,
  "src": null,
  "alt_text": "Image alt text",
  "ratio": "8:5"
}

/* Broken Image Placeholder */
{
  "caption": "Figure caption comes here.",
  "src": "http://example.com/broken-url.jpg",
  "alt_text": "Image alt text",
  "ratio": "8:5"
}

  • Content:
    img {
      max-width: 100%;
      height: auto;
    }
    
    figure {
      img {
        display: block;
        width: 100%;
      }
    }
    
    .image-wrapper {
      position: relative;
      padding-bottom: calc(100% / 8 * 5); // Default ratio 8:5
      background: no-repeat center center color('cyan', -5);
      background-size: 5rem;
      overflow: hidden;
    
      &:empty {
        &::before {
          @include spot-image('camera-light', auto);
    
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          max-width: 3rem;
          max-height: 3rem;
          margin: auto;
          border-radius: 50%;
          background-size: contain;
          box-shadow: 2px 7px 14px 0 rgba(0, 125, 179, .06), 0 4px 12px 0 rgba(0, 125, 179, .1);
          content: "";
    
          @include tablet {
            max-width: 5rem;
            max-height: 5rem;
          }
        }
      }
    
      &[data-ratio='1:1'] {
        padding-bottom: 100%;
      }
    
      &[data-ratio='4:1'] {
        padding-bottom: calc(100% / 4 * 1);
      }
    
      img {
        position: absolute;
        width: 100%;
        min-height: 100%;
    
        &::before {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: color('cyan', -5);
          content: "";
        }
    
        &::after {
          display: flex;
          position: absolute;
          top: 50%;
          left: 50%;
          align-items: center;
          justify-content: center;
          padding-top: 1.4rem;
          transform: translate(-50%, -50%);
          background: url('#{$styleguide-dir}/img/iconfont/broken-link.svg') no-repeat top center;
          background-size: 1.2rem auto;
          color: color('dark-gray', -1);
          font-size: .6rem;
          line-height: 1rem;
          text-align: center;
          white-space: pre;
          content: "Image could not be loaded:\A" attr(alt);
        }
    
        html[lang="nl"] &::after {
          content: "Afbeelding kon niet worden geladen:\A"attr(alt);
        }
    
        html[lang="fr"] &::after {
          content: "L\'image n'a pas pu être chargée:\A" attr(alt);
        }
      }
    }
    
  • URL: /components/raw/image/_image.scss
  • Filesystem Path: components/21-atoms/image/_image.scss
  • Size: 2 KB