unibz Pattern Library

Display 

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

Display utilities

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 onward
  • md = tablet applies, from 760px onward
  • lg = desktop applies, from 1024px onward
  • print = applies only on print media