Height

Set element height

Syntax

space="h:[value]"

Values

Property	CSS Output	Description
h	height: var(--s-{value})	Height
min-h	min-height: var(--s-{value})	Minimum height
max-h	max-height: var(--s-{value})	Maximum height

Scale Values

none, thin, regular, thick, tiny, tiny-2x, small, small-2x, small-3x, small-4x, medium, medium-2x, medium-3x, medium-4x, large, large-2x, large-3x, large-4x, big, big-2x, big-3x, big-4x, giant, giant-2x, giant-3x, giant-4x, vast, vast-2x, vast-3x, vast-4x, vast-5x, vast-6x, vast-7x, vast-8x, vast-9x, vast-10x, min, max, fit, full, half, third, third-2x, quarter, quarter-2x, quarter-3x, 1/1, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4

Examples

<div space="h:full">Full height</div>
<div space="h:half">Half height</div>
<div space="h:[100vh]">Full viewport height</div>
<div space="min-h:[400px]">Min height</div>
<div space="h:max">Content height</div>

Preview

Height Control

space="h:full" - Set fixed heights

h:full

h:third-2x

h:half

View Code

<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 120px;">
  <div space="h:full p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:full</div>
  <div space="h:third-2x p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:third-2x</div>
  <div space="h:half p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:half</div>
</div>

Content-Based Height

space="h:max" - Use min, max, or fit for content-based height

h:min

h:max
Multi
Line

h:fit

View Code

<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="h:min p:small" visual="bg:primary text:white rounded:small">h:min</div>
  <div space="h:max p:small" visual="bg:pink-600 text:white rounded:small">h:max<br>Multi<br>Line</div>
  <div space="h:fit p:small" visual="bg:amber-600 text:white rounded:small">h:fit</div>
</div>

Min/Max Height with Content Values

space="min-h:min" - Constrain height using content values

min-h:min

max-h:max

min-h:[80px]

View Code

<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="min-h:min p:small" visual="bg:primary text:white rounded:small">min-h:min</div>
  <div space="max-h:max p:small" visual="bg:pink-600 text:white rounded:small">max-h:max</div>
  <div space="min-h:[80px] p:small" visual="bg:amber-600 text:white rounded:small" layout="flex center">min-h:[80px]</div>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

<div space="height:[custom-value]">Custom</div>

Notes

TIP

Tailwind Scale Support

Use tw- prefix to access Tailwind numeric scale: h:tw-64 (16rem), min-h:tw-96 (24rem)

Reference