Height + Width

Set the height, width, and aspect ratio of an element

Properties

Height

Utility class	Value	Example
.height-auto	auto	auto
.height-0	0
.height-1px	1px
.height-2px	2px
.height-05	4px
.height-1	8px
.height-105	12px
.height-2	16px
.height-205	20px
.height-3	24px
.height-4	32px
.height-5	40px
.height-6	48px
.height-7	56px
.height-8	64px
.height-9	72px
.height-10	80px
.height-15	120px
.height-card	160px
.height-card-lg	240px
.height-mobile	320px
.height-full	100%	100%
.height-viewport	100vh	`100vh`

Width

Utility class	Value	Example
.width-auto	auto
.width-0	0
.width-1px	1px
.width-2px	2px
.width-05	4px
.width-1	8px
.width-105	12px
.width-2	16px
.width-205	20px
.width-3	24px
.width-4	32px
.width-5	40px
.width-6	48px
.width-7	56px
.width-8	64px
.width-9	72px
.width-10	80px
.width-15	120px
.width-card	160px
.width-card-lg	240px
.width-mobile	320px
.width-mobile-lg	480px	`...`
.width-tablet	640px	`...`
.width-tablet-lg	880px	`...`
.width-desktop	1024px	`...`
.width-desktop-lg	1200px	`...`
.width-widescreen	1400px	`...`
.width-full	100%

Maximum height

Utility class	Value
.maxh-none	none
.maxh-05	4px
.maxh-1	8px
.maxh-105	12px
.maxh-2	16px
.maxh-3	24px
.maxh-4	32px
.maxh-5	40px
.maxh-6	48px
.maxh-7	56px
.maxh-8	64px
.maxh-9	72px
.maxh-10	80px
.maxh-15	120px
.maxh-card	160px
.maxh-card-lg	240px
.maxh-mobile	320px
.maxh-mobile-lg	480px
.maxh-tablet	640px
.maxh-tablet-lg	880px
.maxh-viewport	100vh

Maximum width

Utility class	Value
.maxw-none	none
.maxw-05	4px
.maxw-1	8px
.maxw-105	12px
.maxw-2	16px
.maxw-3	24px
.maxw-4	32px
.maxw-5	40px
.maxw-6	48px
.maxw-7	56px
.maxw-8	64px
.maxw-9	72px
.maxw-10	80px
.maxw-15	120px
.maxw-card	160px
.maxw-card-lg	240px
.maxw-mobile	320px
.maxw-mobile-lg	480px
.maxw-tablet	640px
.maxw-tablet-lg	880px
.maxw-desktop	1024px
.maxw-desktop-lg	1200px
.maxw-widescreen	1400px
.maxw-full	100%

Minimum height

Utility class	Value
.minh-0	0
.minh-1	8px
.minh-2	16px
.minh-3	24px
.minh-4	32px
.minh-5	40px
.minh-6	48px
.minh-7	56px
.minh-8	64px
.minh-9	72px
.minh-10	80px
.minh-viewport	100vh

Minimum width

Utility class	Value
.minw-0	0
.minw-1	8px
.minw-2	16px
.minw-3	24px
.minw-4	32px
.minw-5	40px
.minw-6	48px
.minw-7	56px
.minw-8	64px
.minw-9	72px
.minw-10	80px
.minw-15	120px

Aspect ratio

Utility class	Value (W/H)	Example
.add-aspect-9x16	9/16
.add-aspect-1x1	1/1
.add-aspect-4x3	4/3
.add-aspect-16x9	16/9
.add-aspect-2x1	2/1

Utility classes

Utility classes may be included in your HTML or applied using Utility classes in your Sass.

Utility	Example	Code
.height-value	.height-5	class="height-5"
.width-value	.width-card	class="width-card"
.maxh-value	.maxh-mobile	class="maxh-mobile"
.maxw-value	.maxw-tablet	class="maxw-tablet"
.minh-value	.minh-viewport	class="minh-viewport"
.minw-value	.minw-10	class="minw-10"
.add-aspect-ratio	.add-aspect-16x9	class="add-aspect-16x9"

Use single-quoted strings in Utility classes.
Do not quote numbers or px values. With the exception of half (05), values like '105', and '205' should be treated as strings.
String tokens for half values (like 05) and negative values (like neg-1) may also be written with their unquoted number token equivalent: 0.5, 1.5, 2.5, -1, -1.5, etc.
If multiple utilities share the same prefix (ex: .text- or .flex-) or a single utility accepts multiple kinds of values (ex: .border accepts both border weight and border color), their shared mixin can accept multiple comma-separated values:
- u-text('primary-darkest', 'no-underline', 'bold')
- u-border-top(2px, 'accent-warm')
Output any utility mixin as !important by appending !important to the mixin’s argument list:

u-bg('red-warm-50v', !important)

Utility variants

More information about utility variants can be viewed on the utility variants page. Responsive and state variants are listed as true when they are available for use.

Responsive variants

You can apply different styles at differentresponsive breakpoints using responsive utilities. Use a breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher (eg. .desktop:border-05).

Utility variable	Responsive
$height-settings	false
$width-settings	true
$max-height-settings	false
$max-width-settings	false
$min-height-settings	false
$min-width-settings	false
$add-aspect-settings	false

State variants

You can apply different styles for different state variants using state utilities. Use a state prefix separated with a : to target a utility for a specific state. (eg. .hover:shadow-2).

Utility variable	Active	Focus	Hover	Visited
$height-settings	false	false	false	false
$width-settings	false	false	false	false
$max-height-settings	false	false	false	false
$max-width-settings	false	false	false	false
$min-height-settings	false	false	false	false
$min-width-settings	false	false	false	false
$add-aspect-settings	false	false	false	false