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, tiny, small, medium, big, giant, vast

Examples

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

Preview

Height Control

space="h:[100%]" - Set fixed heights

h:[100%]

h:[80px]

h:[60px]

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:[100%] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[100%]</div>
  <div space="h:[80px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[80px]</div>
  <div space="h:[60px] p:small" visual="bg:primary text:white rounded:small" layout="flex center">h:[60px]</div>
</div>

Min Height

space="min-h:[80px]" - Set minimum height constraint

min-h:[80px]

View Code

<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="min-h:[80px] p:small" visual="bg:primary 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