Foundation
Height and width
Reset the height and width of an element. All height and width classes include responsive prefixes.
Height
.vads-u-height--0
0px
Sets height to zero
.vads-u-height--full
100%
Sets height to full width of container
.vads-u-height--auto
auto
Sets height to height of content
.vads-u-height--viewport
100vh
Sets hight to height of viewport
Min-height
.vads-u-min-height--none
none
Removes min-height
.vads-u-min-height--viewport
100vh
Height cannot be less than height of viewport
Max-height
.vads-u-max-height--none
none
Removes max-height
.vads-u-max-height--viewport
100vh
Prevents height from exceeding height of viewport
Width
.vads-u-width--0
0px
Sets width to zero
.vads-u-width--full
100%
Sets width equal to width of container
.vads-u-width--auto
auto
Sets width to width of content
Min-width
.vads-u-min-width--none
none
Removes min-width
Max-width
.vads-u-max-width--none
none
Removes max-width
.vads-u-max-width--100
100%
Prevents width from exceeding width of container
Responsive prefixes
All height and width utilities include responsive prefixes.
<div class="vads-u-min-height--viewport desktop-lg:vads-u-min-height--none">
$xsmall-screen
--mobile
320px
$small-screen
--mobile-lg
481px
--tablet
640px
$medium-screen
--medium-screen
768px
$small-desktop-screen
--desktop
1024px
$large-screen
--desktop-lg
1201px
Read more about breakpoints.