Line Height

vel-src: typography.css

Utilities for controlling the leading (line height) of an element.

Class	Properties
vel-leading-none	line-height: 1
vel-leading-tight	line-height: 1.25
vel-leading-snug	line-height: 1.375
vel-leading-normal	line-height: 1.5
vel-leading-relaxed	line-height: 1.625
vel-leading-loose	line-height: 2

Examples

Line height

vel-leading-tight

VeloraCSS is a utility-first CSS framework with tight line spacing. Lines are close together.

vel-leading-relaxed

VeloraCSS is a utility-first CSS framework with relaxed line spacing. Lines breathe more.

example.html

<div class="vel-grid vel-grid-cols-2 vel-gap-6">
  <div>
    <p style="color:#64748b;font-size:11px;margin-bottom:6px">vel-leading-tight</p>
    <p class="vel-leading-tight vel-text-sm" style="color:#94a3b8">VeloraCSS is a utility-first CSS framework with tight line spacing. Lines are close together.</p>
  </div>
  <div>
    <p style="color:#64748b;font-size:11px;margin-bottom:6px">vel-leading-relaxed</p>
    <p class="vel-leading-relaxed vel-text-sm" style="color:#94a3b8">VeloraCSS is a utility-first CSS framework with relaxed line spacing. Lines breathe more.</p>
  </div>
</div>