min-height

Basic example

Use minHeight(n) to give an element a minimum height; content taller than the minimum still grows past it:

<div mix={[hstack({ gap: 4, align: "start" })]}>
	<div mix={[minHeight(32), width(48), ...]}>
		<p mix={[...]}>One line.</p>
	</div>
	<div mix={[minHeight(32), width(48), ...]}>
		<p mix={[...]}>
			Several lines of text, more than the minimum holds, so the card grows.
		</p>
	</div>
</div>

Keeping a footer down

Combine minHeight() with a stack that spreads its children to keep a card's footer at its bottom edge, however short the content:

<div mix={[vstack({ justify: "between" }), minHeight(48), width(64), ...]}>
	<p mix={[...]}>A short note.</p>
	<p mix={[...]}>Updated today</p>
</div>

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:

minHeight(4)