<div class="u-d-none">
Never visible.
</div>
<div class="u-d-none@lg">
Not visible on desktop.
</div>
<div class="u-d-none u-d-blk@md">
Not visible on mobile, visible from tablet onward.
</div>
<div class="u-d-none">
Never visible.
</div>
<div class="u-d-none@lg">
Not visible on desktop.
</div>
<div class="u-d-none u-d-blk@md">
Not visible on mobile, visible from tablet onward.
</div>
{
"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"
}
General utility classes to show / hide elements, the class names follow this pattern:
.u-d-<display value>@<media-query>
<display value>
none
= display: none
blk
= display: block
inl
= display: inline
ibl
= display: inline-block
<media-query>
(noting) = no media query, applies from mobile onward (all screen sizes)sm
= small tablet, applies from 596px
onwardmd
= tablet applies, from 760px
onwardlg
= desktop applies, from 1024px
onwardprint
= applies only on print media