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 large-screen:vads-u-min-height--none">

VADS Breakpoint Sass Variable	USWDS Breakpoint Custom Property	Width
`$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