Line Height
Set line height
Syntax
visual="leading:[value]"Values
| Value | CSS Output | Description |
|---|---|---|
none | line-height: 1 | No extra height |
tight | line-height: 1.25 | Tight leading |
snug | line-height: 1.375 | Snug leading |
normal | line-height: 1.5 | Normal leading |
relaxed | line-height: 1.625 | Relaxed leading |
loose | line-height: 2 | Loose leading |
Examples
html
<div visual="leading:relaxed">Relaxed line height</div>Preview
Line Height
visual="leading:relaxed" - Control vertical spacing between lines
Tight leading
for headings
Normal leading
for body text
Loose leading
for readability
View Code
html
<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<p space="m:0" visual="leading:tight">Tight leading<br>for headings</p>
<p space="m:0" visual="leading:normal">Normal leading<br>for body text</p>
<p space="m:0" visual="leading:loose">Loose leading<br>for readability</p>
</div>Arbitrary Values
Supports custom values using bracket syntax:
html
<div visual="line:[custom-value]">Custom</div>