Feature spine

A feature set for the middle of a page: a short intro, then points and photographs hung off one hairline that runs down the centre of the section. It states its own ground and its own vertical padding, so it can sit between two other sections without borrowing air from either of them.

One unbroken vertical rule down the centre of the section, with the points alternating either side of it, facing cropped photographs. The type ramp is quiet, the labels are small, and each photograph balances the point across the rule. The continuous 1px line joins the illustrated rows. Take the spine out and there is no pattern left, which is the test of whether a device is structural rather than decorative.

The spine is drawn as one zero-width column carrying a single left hairline, repeated once per row with no gap above or below it, so the segments touch and read as one line rather than four. It is currentColor, so it cannot blank and it follows your text colour wherever your theme puts it.

Each point sits under its own short rule, running from the outer edge of the section in towards the spine. Those rules are what tie the alternating halves to the centre, and they are also the pattern's answer to a phone.

1. The copy. Four labels, four headings, four sentences. Keep the headings to three or four words: they sit on one line in half the width of the section.
2. The count. Add or remove a row by copying a whole core/columns block and swapping which side the content column sits on. Keep it even, or the last rib will hang on the same side as the one before it. Six is comfortable; eight starts to read as a list rather than a set.
3. The air either side of the spine. That is the block gap on each row, a clamp(). Widen it and the section reads as two columns; narrow it and it reads as one ledger.
4. The section padding. Vertical padding uses the largest core spacing preset. Step it down if this section lands between two others that already bring their own air.

• Typeface. The pattern states no font family anywhere. Labels, headings and body copy are all set in your face, serif or sans.
• Palette. The ground is your base and the type is your contrast, each a fallback chain ending on a colour WordPress itself guarantees, so the section paints in a theme with a full palette and still paints in a theme with none. The inverted variation swaps exactly those two.
• Every rule in the section. The spine and the four ribs are currentColor. They need no chain, they cannot resolve to nothing, and they follow the text into a dark style variation without being restated.
• Spacing scale. The section's padding, the space above the run and the air inside each row are core spacing presets, so they move with your theme's own rhythm.

• The centre. Both halves are 50%, so the spine lands on the middle of the section rather than near it. That is why the air either side of the spine is a block gap and not padding: a gap is symmetrical and it disappears when the row stacks, where padding on one side only would indent every other point on a phone.
• Contiguity. Each row states a zero top and bottom margin and the run sets its block gap to zero, because core gives every columns block a default bottom margin. One unclosed gap and the spine is four lines rather than one.
• Full bleed with a 1240px inner. The section spans the viewport; the intro is held to a 46rem measure inside it so the lede reads at a comfortable length instead of running the width of the band.
• The ramp. A display heading with tight negative tracking, a widely tracked 13px label over each point, and body copy at 16px and up on a half-width measure of roughly 65 characters. Proportion is the whole of the design here, because colour is not ours to spend.

Below 782px WordPress stacks columns, and there is no argument with that: it is core's own rule at a specificity nothing in a pattern can beat. A centre rule cannot survive stacking honestly. Left where it is, it becomes a rule down the edge of every other point, which reads as a mistake rather than as a spine.

So the decision here is that the spine stands down on a phone rather than pretending. The column that carries it holds nothing, so when the row stacks it collapses to zero height and the hairline goes with it, on every row equally. No half-spine, no rule beside two points out of four, no indent on the even ones.

What is left is the ribs. The short rule above each point becomes a full-width divider, so the section reads at 390 as an illustrated sequence, with pictures alternating before and after the point they accompany. The structure changes shape; it never goes missing, and it never lies about being something it is not.

The WordPress sample photographs are part of the copied image blocks, with 16:9 crops and descriptive alt text. Replace a photo in the editor and update its alt text to describe your replacement. Image credits records the sources. The night variation keeps the same pictures.