Clean structure · C.5

Split intro band

A newspaper standfirst: the headline holds the left, the explanation fills the right.

Heading on the left, lead and body on the right, a hairline under the right column that runs off the edge, and a stacked layout below a breakpoint you choose.

JavaScript is off, so the controls are hidden and the stage below shows a static field instead of the running effect. Every word on this page is still here. Nothing is hidden behind the script.

4 knobs

How it works

The reference uses this for its About and Who We Serve sections. It gives a long heading room to wrap into two big lines without pushing the copy down, and the off-edge rule stops the right column looking like it is floating.

A two-column grid with a fixed ratio and gap. The right column ends in a rule that extends past the column to the band edge with a negative right margin, clipped by the band. Below the breakpoint the grid becomes one column and the rule shortens to the content width. The breakpoint is measured against the band's own width with a ResizeObserver, the same thing a container query does, so the stage behaves like a real band at any window size.

The knobs, named

Column ratio, gap, stack breakpoint, and the edge rule. All ours. The reference measured a left column starting at 76px and a right column at about 715px in a 1280px window.

Knob	Source	What it teaches
Column ratio	ours	The reference is close to even. 4:8 suits a short heading and long copy.
Gap	ours	The space between the heading and the copy. It is what makes them two things instead of one block.
Stack below	ours	Band width at which the columns stack. The readout says which side of it the stage is on now.
Edge rule	ours	The hairline under the copy that runs off the right edge. Stacked, it stays inside the content width.

sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.

Evidence

VERIFIED (rendered)

fmjfuelpartner.com, 2026-10-15, offline render at 1280px: About and Who We Serve both place kicker and heading at x=76 and the lead, body or list at about x=715, with a hairline under the right column that runs to the right edge. Our grid, breakpoint logic and rule are original.

Seen on: fmjfuelpartner.com (design study 2026-10-15).
Dependencies: vanilla CSS + ResizeObserver
Difficulty: easy
Performance: One ResizeObserver on the band. No per-frame work.
Accessibility and the floor: Source order is heading then copy in both layouts, so a screen reader and the stacked phone layout read the same. Nothing animates.

Where our build departs from the source: The reference is a desktop Wix layout and sends phones a separate page, so its stacked form was not observed. The stacking rule here is ours.

Notes

Composability. Its left column is C.1 in left-aligned form. Its right column can hold a C.6 marker list instead of body copy.

Use a container query on the band where supported, not a viewport media query, so the band works inside any layout. Clip the band horizontally so the bleeding rule can never widen the page.

Caption plate on a photo

Marker list with a closing rule