Graupl Logo

Height Utilities ​

The height utilities provide a set of classes to adjust the height, max-height, and min-height properties of elements.

Height ​

Class NamePropertyValue
.h-autoheightauto
.h-fit-contentheightfit-content
.h-max-contentheightmax-content
.h-min-contentheightmin-content
.h-stretchheightstretch
.h-fullheight100%
.h-quarterheight25%
.h-halfheight50%
.h-three-quartersheight75%
.h-thirdheightcalc(100%/ 3)
.h-two-thirdsheightcalc(100%/ 1.5)
.h-half-screenheight50vh
.h-third-screenheightcalc(100vh/ 3)
.h-two-thirds-screenheightcalc(100vh/ 1.5)
.h-quarter-screenheight25vh
.h-three-quarters-screenheight75vh
.h-full-screenheight100vh
.h-0heightvar(--graupl-spacer-0)
.h-1heightvar(--graupl-spacer-1)
.h-2heightvar(--graupl-spacer-2)
.h-3heightvar(--graupl-spacer-3)
.h-4heightvar(--graupl-spacer-4)
.h-5heightvar(--graupl-spacer-5)
.h-6heightvar(--graupl-spacer-6)
.h-7heightvar(--graupl-spacer-7)
.h-8heightvar(--graupl-spacer-8)
.h-9heightvar(--graupl-spacer-9)
.h-10heightvar(--graupl-spacer-10)

Max Height ​

Class NamePropertyValue
.max-h-automax-heightauto
.max-h-fit-contentmax-heightfit-content
.max-h-max-contentmax-heightmax-content
.max-h-min-contentmax-heightmin-content
.max-h-stretchmax-heightstretch
.max-h-fullmax-height100%
.max-h-quartermax-height25%
.max-h-halfmax-height50%
.max-h-three-quartersmax-height75%
.max-h-thirdmax-heightcalc(100%/ 3)
.max-h-two-thirdsmax-heightcalc(100%/ 1.5)
.max-h-half-screenmax-height50vh
.max-h-third-screenmax-heightcalc(100vh/ 3)
.max-h-two-thirds-screenmax-heightcalc(100vh/ 1.5)
.max-h-quarter-screenmax-height25vh
.max-h-three-quarters-screenmax-height75vh
.max-h-full-screenmax-height100vh
.max-h-0max-heightvar(--graupl-spacer-0)
.max-h-1max-heightvar(--graupl-spacer-1)
.max-h-2max-heightvar(--graupl-spacer-2)
.max-h-3max-heightvar(--graupl-spacer-3)
.max-h-4max-heightvar(--graupl-spacer-4)
.max-h-5max-heightvar(--graupl-spacer-5)
.max-h-6max-heightvar(--graupl-spacer-6)
.max-h-7max-heightvar(--graupl-spacer-7)
.max-h-8max-heightvar(--graupl-spacer-8)
.max-h-9max-heightvar(--graupl-spacer-9)
.max-h-10max-heightvar(--graupl-spacer-10)

Min Height ​

Class NamePropertyValue
.min-h-automin-heightauto
.min-h-fit-contentmin-heightfit-content
.min-h-max-contentmin-heightmax-content
.min-h-min-contentmin-heightmin-content
.min-h-stretchmin-heightstretch
.min-h-fullmin-height100%
.min-h-quartermin-height25%
.min-h-halfmin-height50%
.min-h-three-quartersmin-height75%
.min-h-thirdmin-heightcalc(100%/ 3)
.min-h-two-thirdsmin-heightcalc(100%/ 1.5)
.min-h-half-screenmin-height50vh
.min-h-third-screenmin-heightcalc(100vh/ 3)
.min-h-two-thirds-screenmin-heightcalc(100vh/ 1.5)
.min-h-quarter-screenmin-height25vh
.min-h-three-quarters-screenmin-height75vh
.min-h-full-screenmin-height100vh
.min-h-0min-heightvar(--graupl-spacer-0)
.min-h-1min-heightvar(--graupl-spacer-1)
.min-h-2min-heightvar(--graupl-spacer-2)
.min-h-3min-heightvar(--graupl-spacer-3)
.min-h-4min-heightvar(--graupl-spacer-4)
.min-h-5min-heightvar(--graupl-spacer-5)
.min-h-6min-heightvar(--graupl-spacer-6)
.min-h-7min-heightvar(--graupl-spacer-7)
.min-h-8min-heightvar(--graupl-spacer-8)
.min-h-9min-heightvar(--graupl-spacer-9)
.min-h-10min-heightvar(--graupl-spacer-10)

Customization ​

To customize the alignment utilities, you can use the following variables.

VariableDescriptionDefault Value
$selector-baseBase selector for utility classes."."
$selector-prefixThe selector prefix for all utility classes.""
$selector-suffixThe selctor suffix for all utility classes.""
$selector-separatorThe selector separator for all utility classes.""
$use-importantAppends !important to generated utility declarations.true
$generate-base-utilitiesGenerates the base utility classes.true
$screen-awareEnables screen-aware utility variants.false
$theme-awareEnables theme-aware utility variants.false
$scheme-awareEnables scheme-aware utility variants.false
$state-awareEnables state-aware utility variants.false
$container-awareEnables container-aware utility variants.false
$screen-aware-selector-prefixPrefix to the screen-aware portion of utility selectors.""
$screen-aware-selector-suffixSuffix to the screen-aware portion of utility selectors.""
$screen-aware-selector-separatorSeparator inserted for screen-aware utility selectors."\\:"
$theme-aware-selector-prefixPrefix to the theme-aware portion of utility selectors.""
$theme-aware-selector-suffixSuffix to the theme-aware portion of utility selectors."-theme"
$theme-aware-selector-separatorSeparator inserted for theme-aware utility selectors."\\:"
$scheme-aware-selector-prefixPrefix to the scheme-aware portion of utility selectors.""
$scheme-aware-selector-suffixSuffix to the scheme-aware portion of utility selectors."-mode"
$scheme-aware-selector-separatorSeparator inserted for scheme-aware utility selectors."\\:"
$state-aware-selector-prefixPrefix to the state-aware portion of utility selectors.""
$state-aware-selector-suffixSuffix to the state-aware portion of utility selectors.""
$state-aware-selector-separatorSeparator inserted for state-aware utility selectors."\\:"
$container-aware-selector-prefixPrefix to the container-aware portion of utility selectors."cq\\:"
$container-aware-selector-suffixSuffix to the container-aware portion of utility selectors.""
$container-aware-selector-separatorSeparator inserted for container-aware utility selectors."\\:"
$utility-propertiesMap of utility properties.()
$utility-valuesMap of utility values.()
$utility-mapMap of utility property/value pairs.()

Responsive Variants ​

Generating responsive utility classes can be done by setting $screen-aware, $theme-aware, $scheme-aware, $state-aware, or $container-aware to true.

By default, no responsive utility classes are generated for height.

✏️ Note

For more information on responsive variants, refer to the Responsive utility classes documentation.