Sizing

Height

Utilities for sets the height of an element.


Class

classcss
h-autoheight: auto
h-fullheight: 100%
h-screenheight: 100vh
h-pxheight: 1px
h-0height: 0
h-1height: 0.25rem
h-2height: 0.5rem
h-3height: 0.75rem
h-4height: 1rem
h-5height: 1.25rem
h-6height: 1.5rem
h-8height: 2rem
h-10height: 2.5rem
h-12height: 3rem
h-16height: 4rem
h-20height: 5rem
h-24height: 6rem
h-32height: 8rem
h-40height: 10rem
h-48height: 12rem
h-56height: 14rem
h-64height: 16rem
h-72 v1.1.3height: 18rem
h-80 v1.1.3height: 20rem
h-88 v1.1.3height: 22rem
h-96 v1.1.3height: 24rem
h-104 v1.1.3height: 26rem
h-112 v1.1.3height: 28rem

Usage

Set basic height to an element.

<!-- Example -->
<y class="h-4">
...
</y>

Set full height to an element.

<!-- Example -->
<y class="h-full">
...
</y>

Set full height in viewport screen to an element.

<!-- Example -->
<y class="h-screen">
...
</y>

Customize More

// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'h',
//variant: 'responsive',
property: 'height',
modifier: (
'...': '...',
'...': '...'
...
)
)
)

Variant

VariantEnabledResponsive
DefaultYesYes
Dark Theme
hoverYes
group-hover
focus
focus-within
active
visited
checked
disabled