Loading...
Loading...
Rules make the page. Columns sit inside them. Band air, cell air, and component-local air are different jobs.
TwContainer is the only host. LinedGrid.colsAt and Line.splitAt must match on composed splits. Content and Hero bring their own measure — they do not replace Line.
Band class. Air above, gutter, how title and description are boxed. featured > topic > body.
One cell between horizontal rules. Fuse or space. Not a wrapper for every block.
Lined page grid. Owns outer and inner. Gapped cards stay Grid gap-5. Specimen /preview/lined-grid.
Column pad and fill. Meets a Line half-rule. Omit border on LinedGrid cells.
minmax(0, --breakpoint-2xl). Hatched gutters from sm; --gutter-width grows at lg. Hidden max-sm. This page is already inside it.
SubjectTitle auto leaves the column at 105rem and sits in the gutter. That is not colsAt and not CopyColumn xl.
Composed Line / LinedGrid stays in TwContainer. Hero and Content add max-w-7xl and px-6 by themselves. Two hosts is a collision, not a missing primitive.
Loading...
Loading...
Loading...
Catalog and Blueprint. One gutter per band. The label on this band is Section.eyebrow — do not add a child SubjectTitle as well.
Composed hero, and Home V2 / Technology V2. Still one gutter: a child SubjectTitle on the Line, not a second Section.eyebrow.
LinedGrid is one column until colsAt. Nested Lines use the same splitAt so the half-rule follows the copy column. Home pairs both at xl. FAQ still pairs Grid.colsAt at lg.
Blueprint: CopyColumn variant flush, Line inset, edge b, splitAt lg. Same pairing, different breakpoint. Not a second gutter.
Accordion lives here on Blueprint. Not shown — Catalog owns Accordion.
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Own cell for the title. Own cell for the description. The air above is the class — mt-50. Never infer featured from page order.
Title and description share one cell. The air above is mt-24. Catalog default when variant is omitted.
Same boxing as topic. The air above is mt-12 — sub to topic, not a third title size. Not the Content primitive.
Section.variant is unlined air before the band. Line.space is the gap between two rules, authored on the lower cell. Omit space and stacked rules fuse.
LinedGrid owns the facing seam. CopyColumn is pad — variant split for this full-height column. Omit border.
MediaPanel layout well. The host owns seams. Not a title column.
variant card. Sized for a grid cell. Horizontal pad is still className px-6 lg:px-8 — the param does not provide it.
variant split is the default. xl:py-40 is a hero column. Dead space in a cell is the wrong variant, not a Line bug.
No pad. Children own inset — FAQ. Leftover facing border is lg, not xl.
At xl, layout split has no in-flow height. It stretches beside a column, not inside a card. LinedGrid cells use well. Resize to see split collapse.
layout well. No extra stroke — LinedGrid owns the cell. This is the collection / card job.
Composed Line · LinedGrid · CopyColumn · MediaPanel is Home. Content image + imageSide is Technology and Blueprint. Do not mix them in one cell.
CopyColumn and MediaPanel share the LinedGrid row. Height comes from the sibling. This is the Platform split.
Do · Content
Content owns lg:grid-cols-2, imageSide, and its own px-6 / py-16. Not CopyColumn. imageSide right — copy first in the DOM.
Band air is Section.variant or a group Line.space. Cell air is Line.space between rules. Component-local air is Hero / Content / Cta pad.
Section.variant, or a group Line.space (Platform uses narrow on every band). Unlined white before the first rule.
Line.space between two rules. CopyColumn variant. Fuse when omitted.
Hero py-32 / py-40. Content py-16 or p-6. Cta py-24. Not Line.space. The Content below is inside a Line on purpose.
Component-local
This pad is Content’s, not the Line’s. Technology V2 wrapping Hero offset in a Line stacks both. That is not a missing Section.
CopyColumn card and split pad on the y-axis. Templates add px-6 lg:px-8. Nested hero Lines use p-2. Do not put p-* on the group Line.
Leftover Grid-era JSON: split and card face at xl. flush faces at lg. Same primitive, two breakpoints. Visible, not tidied away.
No title or description → children wrap in a Line. With a header → children are unwrapped. The wrong choice looks like a Line bug.
Home V2 composes Line + SubjectTitle. Technology V2 uses Section featured for Example contexts; other bands stay Line. Blueprint and the chrome bands on this page use Section.
The Reflow band above is the Line shell Home uses. This band is the Section shell Blueprint uses. Content does not own the gutter.
Content
Full-width Content. Its measure and pad are its own. Catalog Posts own the rest of the Content / Hero / Cta variants.