Eyebrow line
Image right, the full header
Everything the header can carry: an eyebrow, a heading, a paragraph and one yellow pill. Copy sits left of the image on desktop and centred above it at 375.
Eyebrow line
Yellow tagImage left, the mirrored band
The columns swap and keep their widths. On mobile the image leads, because that is the order the artboard draws it in — the markup follows, so nothing is reordered in CSS.
No eyebrow, no button
A heading and a paragraph are enough. Every field below the heading is optional and the band closes up around whatever is left out.
Eyebrow line
A square top edge
Corner treatment is a section setting, not a block field. A square band sits flush against the one above and still hands a full shoulder to the one below.
Eyebrow line
Yellow tagA portrait file in a landscape box
The media box is 5:4 on desktop and square at 375. A tall file is centre-cropped to fit, which is what the corner dots in this placeholder are here to show.
Heading only
Eyebrow line
No image at all
Not a designed state, but an editor can reach it: with no image the copy takes the whole column instead of leaving half the band empty.
Eyebrow line
Yellow tagTwo sand bands in a row, deliberately
Two adjacent bands in one mode drop the corner and share one boundary’s air. The pair above and this one show it on purpose — the designs never repeat a background.