Theming Sizing

Sizing utilities provide tokenized width/height control for responsive compositions and reusable component layouts.

This demo visualizes different width, height, min/max-width, and min/max-height classes.

Width Classes

Boxes showing widths in % or viewport units.

Height Classes (Percentage)

Parent container height is 200px. Boxes demonstrate percentage heights relative to the parent.

Height Classes (Viewport Units)

Boxes showing height in viewport units (vh).

Min & Max Height (Percentage)

Boxes constrained by min-height or max-height percentages relative to the parent container (200px).