[ @sdxc/u/size ]
height
Applies the physical height property, keeping element size tied to the viewport axis across writing-modes and directions.
import { height } from "@sdxc/u/size";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.height("full") | css({ height: "100%" }) |
Examples
Basic example
Use height(n) with a step of the spacing scale, like height(16) or height(32), to set an element's physical height:
height(12)
height(20)
height(28)
height(36)
height(44)
<div mix={[hstack({ gap: 4, align: "end" })]}>
<div mix={[height(12), width(24), ...]}>height(12)</div>
<div mix={[height(20), width(24), ...]}>height(20)</div>
<div mix={[height(28), width(24), ...]}>height(28)</div>
<div mix={[height(36), width(24), ...]}>height(36)</div>
<div mix={[height(44), width(24), ...]}>height(44)</div>
</div>Filling the parent
Use height("full") to fill the height of a parent that sets one, or pass any CSS length as a string, like height("50%"):
height("full")
height("50%")
<div mix={[hstack({ gap: 4, align: "start" }), height(48), p(4), ...]}>
<div mix={[height("full"), width(32), ...]}>height("full")</div>
<div mix={[height("50%"), width(32), ...]}>height("50%")</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.height("full"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.height("full"))Customizing your theme
Customizing spacing
Every numeric step multiplies --ui-spacing, so redefining it rescales every spacing and sizing utility at once:
:root {
--ui-spacing: 0.25rem;
}Every call that names the step now reads the new value:
height(4)Signature
u.height(value: SizeValue)