unibz Pattern Library

Float 

<div class="u-float-lft">
    Floting left.
</div>

<div class="u-float-rgt@md">
    Floting right on tablet.
</div>

<div class="u-float-rgt u-float-none@md">
    Floting right on mobile, do not float from tablet onward.
</div>
 
<div class="u-float-lft">
  Floting left.
</div>

<div class="u-float-rgt@md">
  Floting right on tablet.
</div>

<div class="u-float-rgt u-float-none@md">
  Floting right on mobile, do not float 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 float (un-float) elements, the class names follow this pattern:

.u-float-<float value>@<media-query>

<display value>

  • none = float: none
  • lft = float: left
  • rgt = float: right

<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