Cirrus

#Height

Updated
0.7.0

Classes to set the height of an element.

ClassStyles
h-0
height: 0;
h-px
height: 1px;
h-auto
height: auto;
h-screen
height: 100vh;
h-10p
height: 10%;
h-20p
height: 20%;
h-30p
height: 30%;
h-40p
height: 40%;
h-50p
height: 50%;
h-60p
height: 60%;
h-70p
height: 70%;
h-80p
height: 80%;
h-90p
height: 90%;
h-100p
height: 100%;
h-1
height: 0.5rem
h-2
height: 1rem
h-3
height: 1.5rem
h-4
height: 2rem
h-5
height: 2.5rem
h-6
height: 3rem
h-8
height: 4rem
h-10
height: 5rem
h-12
height: 6rem
h-16
height: 8rem
h-20
height: 10rem
h-24
height: 12rem
h-32
height: 16rem
h-48
height: 24rem
h-64
height: 32rem

#Scaled Heights

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

h-30p

h-50p

h-70p

h-90p

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

#Absolute Heights

New
0.7.1

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

h-6

h-8

h-16

h-32

<div>
    <div class="h-6">...</div>
    <div class="h-8">...</div>
    <div class="h-16">...</div>
    <div class="h-32">...</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>

#Responsive

New
0.7.0

All utility classes mentioned here support viewport based application. All you need to do is add a -<viewport> at the end of the class(es) you are using. For example, use h-30p-md to apply h-30p on medium screens and above.

<div class="h-30p-md">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.