Cirrus

#Height

Classes to set the height of an element.

ClassStyles
h-10
height: 10%;
h-20
height: 20%;
h-30
height: 30%;
h-40
height: 40%;
h-50
height: 50%;
h-60
height: 60%;
h-70
height: 70%;
h-80
height: 80%;
h-90
height: 90%;
h-100
height: 100%;
h-auto
height: auto;
h-screen
height: 100vh;

#Scaled Heights

The h-{{value}} classes gives an element a percentage based height.

h-30

h-50

h-70

h-90

<div>
    <div class="h-30">...</div>
    <div class="h-50">...</div>
    <div class="h-70">...</div>
    <div class="h-90">...</div>
</div>

#Screen Height

The h-screen class makes an element span the entire viewport.

h-screen

<div>
    <div class="h-screen">...</div>
</div>

#Auto

The h-auto class makes an element use a browser determined height. This is commonly used to unset a previously set height.

h-auto

<div>
    <div class="h-auto">...</div>
</div>