Size utilities
Width
Set the width of an element.
Usage
u-width-[size](@[breakpoint])
-
size
The size as one of these values:- None:
0 - Pixels:
50px,75px,100px,150px,200px,250px,300px,350px,400px,500px,600px,700px,800px,1400px - Scale:
2xs,xs,s,m,l - Icon matching sizes:
icon-s,icon-m,icon-l - Full:
100% - Auto:
auto
- None:
-
breakpoint (optional)
Apply the utility from the specified breakpoint and larger.
Examples
This is a fixed width box
u-width-300
This box will be larger on a medium size screen
u-width-300 u-width-500@medium
Maximum width
Set the maximum width of an element.
Usage
u-max-width-[size](@[breakpoint])
-
size
The size as one of these values:- None:
0 - Pixels:
50px,75px,100px,150px,200px,250px,300px,350px,400px,500px,600px,700px,800px,1400px - Scale:
2xs,xs,s,m,l - Icon matching sizes:
icon-s,icon-m,icon-l - Full:
100% - Auto:
auto
- None:
-
breakpoint (optional)
Apply the utility from the specified breakpoint and larger.
Mininum width
Set the minimum width of an element.
Usage
u-min-width-[size](@[breakpoint])
-
size
The size as one of these values:- None:
0 - Pixels:
50px,75px,100px,150px,200px,250px,300px,350px,400px,500px,600px,700px,800px,1400px - Scale:
2xs,xs,s,m,l - Icon matching sizes:
icon-s,icon-m,icon-l - Full:
100% - Auto:
auto
- None:
-
breakpoint (optional)
Apply the utility from the specified breakpoint and larger.
Height
Set the height of an element.
Usage
u-height-[size](@[breakpoint])
-
size
The size as one of these values:- None:
0 - Pixels:
50px,75px,100px,150px,200px,250px,300px,350px,400px,500px,600px,700px,800px,1400px - Scale:
2xs,xs,s,m,l - Icon matching sizes:
icon-s,icon-m,icon-l - Full:
100% - Auto:
auto
- None:
-
breakpoint (optional)
Apply the utility from the specified breakpoint and larger.
Examples
This is a fixed height box
u-height-100
This box will be taller on a medium size screen
u-height-100 u-height-300@medium
Maximum height
Set the maximum height of an element.
Usage
u-max-height-[size](@[breakpoint])
-
size
The size as one of these values:- None:
0 - Pixels:
50px,75px,100px,150px,200px,250px,300px,350px,400px,500px,600px,700px,800px,1400px - Scale:
2xs,xs,s,m,l - Icon matching sizes:
icon-s,icon-m,icon-l - Full:
100% - Auto:
auto
- None:
-
breakpoint (optional)
Apply the utility from the specified breakpoint and larger.
Mininum height
Set the minimum height of an element.
Usage
u-min-height-[size](@[breakpoint])
-
size
The size as one of these values:- None:
0 - Pixels:
50px,75px,100px,150px,200px,250px,300px,350px,400px,500px,600px,700px,800px,1400px - Scale:
2xs,xs,s,m,l - Icon matching sizes:
icon-s,icon-m,icon-l - Full:
100% - Auto:
auto
- None:
-
breakpoint (optional)
Apply the utility from the specified breakpoint and larger.