Buy Now
  1. Components
  2. Utilities
  3. Height

Height

Use height utilities to quickly style the height of an element. Great for cards, buttons, or any other element.

Set a Height

You can set a height to an element instantly by using the following utilities classes for height.

.ht-80
.ht-150
.ht-100
<div class="wd-150 ht-80 bg-gray-400">.ht-80</div>
<div class="wd-150 ht-150 bg-gray-400 mg-l-20">.ht-150</div>
<div class="wd-150 ht-100 bg-gray-400 mg-l-20">.ht-100</div>
Smaller Height Value
.ht-[value] 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
Regular Height Value
.ht-[value] 15 | 20 | 25 | 30 | ... | 100   (step of 5)
Bigger Height Value
.ht-[value] 150 | 200 | 250 | 300 | ... | 850   (step of 50)

Percentage Height

You can set a height through percentage using the following utilities classes.

Class Value
.ht-[value]p 10 | 20 | 30 | 40 | ... | 100   (step of 10)

Media Query Height

You can also set a height to a different media query using the following utilities classes.

Class Value
.ht-[size]-[value]

size: xs | sm | md | lg | xl

value: the height value (refer to code above)
.ht-[size]-[value]p

Extra Height Classes

You can also set a height using the extra utilities classes below.

Class Description
.ht-100v Set a height to an element based on viewport height.
.ht-auto Set an auto height to an element.