<div class="u-push-top">
Margin top of one space.
</div>
<div class="u-push-horz-4@lg">
4px horizontal margin on large screens.
</div>
<div class="u-padd-horz-half@lg u-pull-top-quarter@sm u-pull-top-none@md">
Half space horizontal padding on large screens. Quarter space negative margin on small tablet screens, reseted to 0 on regular tablet screens
</div>
<div class="u-w-140">
140px wide element.
</div>
<div class="u-push-top">
Margin top of one space.
</div>
<div class="u-push-horz-4@lg">
4px horizontal margin on large screens.
</div>
<div class="u-padd-horz-half@lg u-pull-top-quarter@sm u-pull-top-none@md">
Half space horizontal padding on large screens. Quarter space negative margin on small tablet screens, reseted to 0 on regular tablet screens
</div>
<div class="u-w-140">
140px wide element.
</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"
}
Utility classes to create whitespace between elements, the class names follow this pattern:
.u-<property>-<direction>-<amount>@<media-query>
<properties>
push
= marginpull
= negative marginpadd
= padding<direction>
top
= topbtm
= bottomlft
= leftrgt
= rightvert
= vertical - top bottomhorz
= horizontal - left right
(nothing) = all sides<ammount>
Most amounts are multiples of the $space
variable wich ammounts to 24px
and is equivalent to the line-height of a text paragraph.
1
= 1px2
= 2px3
= 3px4
= 4pxquarter
= $space-quarter,half
= $space-half,threeQuarter
= $space-threeQuarter,
(nothing) = $space,oneAndHalf
= $space-oneAndHalf,double
= $space-double,none
= 0<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 mediaSmall set of classes that set the width of elements. Use with caution as they are not responsive.