Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Utilities

Height and width

Reset the height and width of an element. All height and width classes include responsive prefixes.

Height

Height

CSS property: 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

Min-height

CSS property: 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

Max-height

CSS property: 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

Width

CSS property: 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

Min-width

CSS property: min-width

.vads-u-min-width--none
none

Removes min-width

Max-width

Max-height

CSS property: max-height

.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">
Breakpoint sass variable Width
$xsmall-screen 320px
$small-screen 481px
$medium-screen 768px
$small-desktop-screen 1008px
$large-screen 1201px

Read more about breakpoints.