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.
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 border or shadow, as it can be seen in the example (witch has red border and blue shadow).
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.
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:
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.
<!-- Images -->
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-thumbnail">
<img src="..." alt="..." class="img-squerkle">
<!-- 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>