Images

<img class="u-img-full" src="../../assets/bridge-524-295.jpg" alt="">

<img class="u-img-max" src="../../assets/bridge-524-295.jpg" alt="">

<img class="u-img-bw" src="../../assets/bridge-524-295.jpg" alt="">

<a href="#">
  <img class="u-img-bw" src="../../assets/bridge-524-295.jpg" alt="">
</a>
<img class="u-img-full" src="{{ path image }}" alt="">

<img class="u-img-max" src="{{ path image }}" alt="">

<img class="u-img-bw" src="{{ path image }}" alt="">

<a href="#">
  <img class="u-img-bw" src="{{ path image }}" alt="">
</a>
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio eget.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio eget.",
  "linkTarget": "_self",
  "url": "https://www.unibz.it",
  "image": "/assets/bridge-524-295.jpg"
}

Image utilities

Utility classes to make images responsive:

Make images span the whole width of its parent, works on the images or on the direct parent element:

<img class="u-img-full" src="..." alt="..." >

<div class="u-img-full">
  <img src="" alt="">
</div>

Make images span the full with of its parent but never wider than its own width, works on the images or on the direct parent element:

<img class="u-img-max" src="..." alt="..." >

<div class="u-img-max">
  <img src="" alt="">
</div>

Decorative image utilities

Utility class to make images black and white, the b&w effect will be transitioned out if surrounded by a link that is hovered.

<img class="u-img-bw" src="..." alt="..." >

<a href="..">
  <img class="u-img-bw" class src="" alt="">
</a>