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 Squerkle mask Squerkle mask 
					


<img src="..." alt="..." class="img-rounded">





<img src="..." alt="..." class="img-thumbnail">





<img src="..." alt="..." class="img-squerkle">

Squerkle mask/shape

You can add the squerkle shape/mask, by adding the .img-squerkle class, to any container.

Since, squerkle shape/mask, it is implemented as css mask it can't have borders or shadow, as it can be seen in the example (whitch has red border and blue shadow).

Squerkle mask Squerkle mask

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 
					


<img src="..." class="img-fluid img-responsive" alt="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 
					


<img srcset="../img/example.png 300w, ../img/example-large.png 600w" sizes="(max-width: 500px) 300px, 600px" src="../img/example-large.png" class="" alt="Width based example image">




<img srcset="../img/example.png, ../img/example-2x.png 2x" src="../img/example-large.png" class="" alt="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 
					


<picture>
  <source srcset="img/example-large-1280px.png" media="(min-width: 1280px)">
  <source srcset="img/example-small-1024px.png" media="(max-width: 1024px)">
  <img src="img/example-1280px-1024px.png" alt="Example image for screen size between 1280px and 1024px">
</picture>