Press/to search

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>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
$class: 'h',
$property: height,
$modifier: (
1: 1rem,
2: 2rem
//...
)
);

// Add Variants
@include yogurt(
$class: 'h',
$property: height,
$modifier: (
1: 1rem,
2: 2rem
//...
),
$variant: (
'responsive',
'hover'
//...
)
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.