Height Utilities
NuvoUI provides a comprehensive set of utilities for controlling the height of elements, from fixed dimensions to percentage-based and content-aware sizing.
Fixed Height Utilities
Apply specific height values from the spacing scale:
Available Fixed Height Classes
Height utilities are generated from the VAR.$spacings map, including values like:
| Class | Size | Pixels |
|---|---|---|
.h-0 | 0 | 0px |
.h-1 | 0.25rem | 4px |
.h-2 | 0.5rem | 8px |
.h-4 | 1rem | 16px |
.h-8 | 2rem | 32px |
.h-12 | 3rem | 48px |
.h-16 | 4rem | 64px |
.h-24 | 6rem | 96px |
.h-32 | 8rem | 128px |
.h-48 | 12rem | 192px |
.h-64 | 16rem | 256px |
Percentage Height Utilities
Set height as a percentage of the parent container:
Available Percentage Height Classes
Height percentage utilities are generated from the VAR.$percentages list:
| Class | Description |
|---|---|
.h-0p | Sets height to 0% |
.h-5p | Sets height to 5% |
.h-10p | Sets height to 10% |
.h-25p | Sets height to 25% |
.h-33p | Sets height to 33% |
.h-50p | Sets height to 50% |
.h-66p | Sets height to 66% |
.h-75p | Sets height to 75% |
.h-90p | Sets height to 90% |
.h-100p | Sets height to 100% |
Special Height Values
Apply common height values:
Content-Based Height Values
Control height based on content:
Available Special Height Classes
| Class | CSS Property | Description |
|---|---|---|
.h-auto | height: auto; | Default height, based on content |
.h-full | height: 100%; | Full height of container |
.h-screen | height: 100dvh; | Full viewport height (dynamic viewport height) |
.h-min | height: min-content; | Height based on minimum content size |
.h-max | height: max-content; | Height based on maximum content size |
.h-fit | height: fit-content; | Height based on fit-content algorithm |
Min-Height and Max-Height Utilities
Control minimum and maximum height constraints:
Available Min-Height and Max-Height Classes
- Min-height classes: Start with
min-h-(e.g.,min-h-full,min-h-32,min-h-50p) - Max-height classes: Start with
max-h-(e.g.,max-h-full,max-h-64,max-h-75p)
Responsive Height Utilities
Change height at different breakpoints using the @breakpoint notation:
Interactive Height States
Change height on hover or with group interactions:
Common UI Patterns
Full-Height Layout
Card with Fixed Height
Responsive Height Element
Image with Aspect Ratio
Height Utilities Reference Table
Fixed Height Classes
Height utilities are generated from the VAR.$spacings map:
| Class | Size | Pixels |
|---|---|---|
.h-0 | 0 | 0px |
.h-1 | 0.25rem | 4px |
.h-2 | 0.5rem | 8px |
.h-3 | 0.75rem | 12px |
.h-4 | 1rem | 16px |
.h-5 | 1.25rem | 20px |
.h-6 | 1.5rem | 24px |
.h-8 | 2rem | 32px |
.h-10 | 2.5rem | 40px |
.h-12 | 3rem | 48px |
.h-16 | 4rem | 64px |
.h-20 | 5rem | 80px |
.h-24 | 6rem | 96px |
.h-32 | 8rem | 128px |
.h-40 | 10rem | 160px |
.h-48 | 12rem | 192px |
.h-56 | 14rem | 224px |
.h-64 | 16rem | 256px |
Percentage Height Classes
Height percentage utilities are generated from the VAR.$percentages list:
| Class | Description |
|---|---|
.h-0p | Sets height to 0% |
.h-5p | Sets height to 5% |
.h-10p | Sets height to 10% |
.h-15p | Sets height to 15% |
.h-20p | Sets height to 20% |
.h-25p | Sets height to 25% |
.h-30p | Sets height to 30% |
.h-33p | Sets height to 33% |
.h-40p | Sets height to 40% |
.h-50p | Sets height to 50% |
.h-60p | Sets height to 60% |
.h-66p | Sets height to 66% |
.h-70p | Sets height to 70% |
.h-75p | Sets height to 75% |
.h-80p | Sets height to 80% |
.h-90p | Sets height to 90% |
.h-100p | Sets height to 100% |
Special Height Classes
| Class | CSS Property | Description |
|---|---|---|
.h-auto | height: auto; | Default height, based on content |
.h-full | height: 100%; | Full height of container |
.h-screen | height: 100dvh; | Full viewport height (using dynamic viewport height) |
.h-min | height: min-content; | Height based on minimum content size |
.h-max | height: max-content; | Height based on maximum content size |
.h-fit | height: fit-content; | Height based on fit-content algorithm |
Min-Height Classes
| Class | Description |
|---|---|
.min-h-0 | Sets min-height to 0 |
.min-h-full | Sets min-height to 100% |
.min-h-{size} | Sets min-height to a specific size from spacing scale |
.min-h-{percentage}p | Sets min-height to a specific percentage |
Max-Height Classes
| Class | Description |
|---|---|
.max-h-0 | Sets max-height to 0 |
.max-h-full | Sets max-height to 100% |
.max-h-{size} | Sets max-height to a specific size from spacing scale |
.max-h-{percentage}p | Sets max-height to a specific percentage |
SCSS Mixins
NuvoUI provides a comprehensive set of height-related mixins for use in your SCSS:
Height Mixins
| Mixin | Description | Parameters |
|---|---|---|
@include height($value) | Sets height using units | $value: height value with units |
@include height-percent($i) | Sets height as percentage | $i: percentage as number |
@include min-height($value) | Sets minimum height using units | $value: height value with units |
@include min-height-percent($i) | Sets minimum height as percentage | $i: percentage as number |
@include max-height($value) | Sets maximum height using units | $value: height value with units |
@include max-height-percent($i) | Sets maximum height as percentage | $i: percentage as number |
Special Height Mixins
| Mixin | Description | CSS Output |
|---|---|---|
@include h-auto | Sets height to auto | height: auto; |
@include h-full | Sets height to 100% | height: 100%; |
@include h-screen | Sets height to viewport height | height: 100dvh; |
@include h-max | Sets height to max-content | height: max-content; |
@include h-min | Sets height to min-content | height: min-content; |
@include h-fit | Sets height to fit-content | height: fit-content; |
@include min-h-full | Sets min-height to 100% | min-height: 100%; |
@include max-h-full | Sets max-height to 100% | max-height: 100%; |