Every primitive below is a <jst-*> element styled by
CSS alone; there is no script on this page. Per-instance values are set
with an inline custom property like --space.
Even vertical space between flow children.
A group of things that wraps; good for tags and button rows.
As many --min-wide columns as fit. Resize to see it reflow; no media queries.
Sidebar beside content; wraps under it when content gets too narrow.
Main content takes the rest of the row and stays at least 60% wide before the sidebar wraps above it.
A <jst-field> is one labelled control with an optional
hint. A <jst-form-row> is a single-line form: fields share
the row and wrap when tight, buttons keep their natural size.
Children share the row equally until the container is narrower than
--threshold, then all of them stack. The limit
attribute caps items per row.
Starter
Team
Enterprise
The data-principal child centers vertically inside
--min-height; anything before or after it sits at the edges.
Eyebrow text
Footer line
Crops media (or centers anything else) to --ratio.
Overflowing children scroll horizontally at --item-width
instead of shrinking.
Positions over its parent, centered by default. The parent needs no
class: any element with a <jst-imposter> child becomes
the positioning container.
Content underneath underneath underneath
Inline SVG sized to the capital height of the surrounding text:
This box only sets --jst-accent. The shade ramp and accessible
foreground re-derive automatically.