Height

vel-src: sizing.css

Utilities for setting the height of an element.

Class	Properties
vel-h-0	height: 0px
vel-h-auto	height: auto
vel-h-full	height: 100%
vel-h-screen	height: 100vh
vel-h-min	height: min-content
vel-h-max	height: max-content
vel-h-fit	height: fit-content
vel-h-1	height: 0.25rem
vel-h-2	height: 0.5rem
vel-h-4	height: 1rem
vel-h-8	height: 2rem
vel-h-16	height: 4rem
vel-h-32	height: 8rem
vel-h-64	height: 16rem

Examples

Height variants

h-8

h-16

h-24

example.html

<div class="vel-flex vel-items-end vel-gap-4">
  <div style="background:#1a2236;border:1px solid #1e2d45;border-radius:6px;display:flex;flex-direction:column;justify-content:flex-end">
    <div class="vel-h-8 vel-bg-primary vel-rounded-sm" style="width:60px"></div>
    <p style="color:#64748b;font-size:11px;text-align:center;margin-top:4px">h-8</p>
  </div>
  <div style="background:#1a2236;border:1px solid #1e2d45;border-radius:6px;display:flex;flex-direction:column;justify-content:flex-end">
    <div class="vel-h-16 vel-bg-success vel-rounded-sm" style="width:60px"></div>
    <p style="color:#64748b;font-size:11px;text-align:center;margin-top:4px">h-16</p>
  </div>
  <div style="background:#1a2236;border:1px solid #1e2d45;border-radius:6px;display:flex;flex-direction:column;justify-content:flex-end">
    <div class="vel-h-24 vel-bg-danger vel-rounded-sm" style="width:60px"></div>
    <p style="color:#64748b;font-size:11px;text-align:center;margin-top:4px">h-24</p>
  </div>
</div>