image

Image elements can be used with or without caption.

Since IE 11 does not support srcset or related functionality, always include a src attribute as fallback.

table of content

description
component variations
- default
- no caption
style scss

component variations

default

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

<figure class="a-image">
  <div class="a-image__ratioWrapper">
    <img
      src="https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg"
      srcset="
        https://brandguide-cdn.azureedge.net/frontend-kit/example-image-400w.jpg   400w,
        https://brandguide-cdn.azureedge.net/frontend-kit/example-image-800w.jpg   800w,
        https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg 1600w
      "
      alt="Lorem ipsum dolor sit amet"
    />
  </div>
  <figcaption>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor.
  </figcaption>
</figure>

no caption

Open on blank page

<figure class="a-image">
  <div class="a-image__ratioWrapper">
    <img
      src="https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg"
      srcset="
        https://brandguide-cdn.azureedge.net/frontend-kit/example-image-400w.jpg   400w,
        https://brandguide-cdn.azureedge.net/frontend-kit/example-image-800w.jpg   800w,
        https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg 1600w
      "
      alt="Lorem ipsum dolor sit amet"
    />
  </div>
</figure>

additional content

styles SCSS

.a-image {
  display: block;
  margin: 0;

  &__ratioWrapper {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
  }

  figcaption {
    margin-top: 0.5rem;
    letter-spacing: 0;
  }
}