Components

Images

Images consist of standard images, bordered images and captioned images. All of these components can be aligned to the left or right of content or on a line of their own.

Note: The minimum width for uploaded image needs to be 2x the desktop display size for retina device support.

Standard images

The below examples show the standard image formatting options with and without captions and/or border. All images with or without borders and captions can be floated to the left or the right with the following modifier classes.

.c-image-content--right

Image floated right

.c-image-content--left

Image floated left

<figure class="c-image-content c-image--small [modifier class]">
  <img alt="Image" src="/kss-assets/images/placeholder/860x524.png" class="c-image-content__image">
</figure>

Image sizes

Image sizes are restricted. Image needs to be 2x the desktop display size for retina device support.

Note: there is no default image style as you MUST use one of the below listed modifier classes, otherwise you will experience cross browser issues due to there being no CSS width applied by default.

.c-image--thumb

Thumbnail image size

.c-image--small

Small image size

.c-image--large

Large image size

.c-image--full-width

Full width image size

<figure class="c-image-content [modifier class]">
  <img alt="Image" src="/kss-assets/images/placeholder/860x524.png" class="c-image-content__image">
</figure>

Linked images

Standard image formatting option with an anchor link.

<figure class="c-image-content c-image--small ">
  <a class="c-image-content__link" href="#0">
    <img alt="Image" src="/kss-assets/images/placeholder/860x524.png" class="c-image-content__image">
  </a>
</figure>

Bordered images

Images with a border. Image sizing is fixed, please use the recommended sizes for images.

<figure class="c-image-content c-image-content--border c-image--small ">
  <img class="c-image-content__image" alt="Image" src="/kss-assets/images/placeholder/860x524.png">
</figure>

Bordered images - Full width

Full width images with a border.

<figure class="c-image-content c-image-content--border c-image--full-width">
  <img class="c-image-content__image" alt="Image" src="/kss-assets/images/placeholder/860x524.png">
  <figcaption class="c-image-content__caption">Caption text</figcaption>
</figure>

Captioned images

Image with caption text. Captioned images must have a border.

<figure class="c-image-content c-image-content--border c-image--small ">
    <img class="c-image-content__image" alt="Image" src="/kss-assets/images/placeholder/860x524.png">
  <figcaption class="c-image-content__caption">Caption text</figcaption>
</figure>

Responsive images - picture element

Implementation of the <picture> element from the HTML5 spec. This requires picturefill polyfill and Modernizr 3.1 to detect the picture feature (see the JavaScript section).

Note: Please ensure you copy all of the below code (including the IE 9 conditional comment) to ensure all browsers we support will display this element. See: https://scottjehl.github.io/picturefill/ for more details.

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source media="(min-width: 980px)" srcset="/kss-assets/images/placeholder/picture/large.png, /kss-assets/images/placeholder/picture/large@2x.png 2x">
  <source media="(min-width: 768px)" srcset="/kss-assets/images/placeholder/picture/medium.png, /kss-assets/images/placeholder/picture/medium@2x.png 2x">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="/kss-assets/images/placeholder/picture/small.png, /kss-assets/images/placeholder/picture/small@2x.png 2x" alt="a cute kitten">
</picture>