[Library] Features

Catalogue accessStandard

Feature spine

A feature set built on one unbroken hairline running down the centre of the section, with four points alternating either side of it and each one hung from its own short rule meeting the spine. On a phone the centre rule stands down rather than pretending to be one, and the short rules become the full-width dividers that carry the stack. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

A feature set for the middle of a page: a short intro, then four points 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.

The signature moment

The spine

One unbroken vertical rule down the centre of the section, with the points alternating either side of it. Nothing else in the pattern is loud: the type ramp is quiet, the labels are small, and the whole composition is carried by a single 1px line and the four short rules that meet it. 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.

What it inherits from your theme

  • 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.

What it decides for itself

  • 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.

What you change first

  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.
What happens at 390, and why176 words

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 a plain ruled list in the right order, which is what four features want at that measure anyway. The structure changes shape; it never goes missing, and it never lies about being something it is not.

Back to the library

Continue exploring

Next in Features

Explore all 15 Features patterns