Images

Documentation and examples for styling images via css classes.

Design

Image shapes

Add classes to an <img> element to easily style images.

In addition, you can use the border-radius helper classes to give an image a custom border radius.

A generic placeholder image 200x200 A generic placeholder image 200x200 A generic placeholder image 200x200

Responsive images

Images are made responsive with .img-fluid class. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

.img-responsive class is also supported for backwards compatibilty with Nordic Cool 3.

Placeholder: Responsive image Placeholder: Responsive image

Resolution switching

If you suport multiple display resolutions and want to display larger or smaller images depending on the device, use <img> tag with scrset and/or sizes atributes:

Width based example image


Screen density example image

Picture element

Use for:

  • Art direction (ex: loading a simpler version of an image, on smaller displays).
  • Offering alternative image formats.
  • Saving bandwidth and speeding page load times by loading the most appropriate image for the viewer's display.

If you are using the <picture> element to specify multiple <source> elements for a specific <img>, make sure to add the .img-* classes to the <img> and not to the <picture> tag.

Example image for screen size between 1280px and 1024px 
				
<!-- Images -->
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-thumbnail">

<!-- Responsive images -->
<img src="..." class="img-fluid img-responsive" alt="Responsive image">

<!-- Resolution switching -->
<img srcset="..." sizes="..." class= alt="Width based example image">
<img srcset="..." class= alt="Screen density example image">

<!-- Picture element -->
<picture>
  <source srcset="..." media="...">
  <source srcset="..." media="...">
  <img src="..." alt="...">
</picture>