<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"
}
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>
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>