[Library] Features

Catalogue accessStandard

Feature rows

A feature set as four full-width ruled rows in which the hierarchy is upside down: the section heading is the smallest type in the band, a tracked line above the first rule, and each of the four points is set at the size a section heading usually gets, with its explanation beside it as a footnote in a narrow right-hand column. Hairlines in currentColor open and close the run. 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 as four full-width ruled rows rather than a grid. Each row is one point set at the size a section heading usually gets, with its explanation beside it in a narrow column at footnote size. It is the answer for a page where the features are four sentences rather than four cards.

The signature moment

The hierarchy upside down

The section heading is the smallest type in the band and the four points are the largest. The opening What you get is a tracked, uppercase line at 15px sitting alone above the first rule, with one short paragraph under it at the same footnote scale. Then every row states its point at up to 2.875rem with tight negative tracking, and glosses it in a 36% right-hand column at 1rem.

The collision between the two is the design. Four statements read down the section like four headlines, the section's own heading has stood aside to let them, and the small copy beside each one is there for the reader who has already been convinced by the statement and wants the detail. Nothing is numbered and nothing hangs outside the measure: the weight of the type is the structure.

This pattern used to be a ruled index with a display numeral hanging in a narrow left column, which is the shape steps-ledger owns in the steps section, and feature-grid already carries numerals inside features. It was reshaped rather than retired, because ruled full-width rows are the right container for a feature set of four sentences; what changed is what fills the row.

What it inherits from your theme

  • The typeface. No font family is stated anywhere. The statements and the gloss are set in your face, and the section reads very differently in a serif theme than in a sans one, which is the point.
  • Your colours. The ground asks for base and everything on it asks for contrast, the two slugs every stock block theme defines, each as a fallback chain ending on a colour WordPress itself guarantees. Nothing here can resolve to nothing.
  • Your spacing scale. Row padding and the header's gap are spacing presets, so a theme with a generous scale gets taller rows without you editing anything.
  • The rules. Every hairline is currentColor, so it is exactly the colour of the text beside it, in any theme and on either ground.

What it decides for itself

  • Full bleed with its own measure. The section spans the viewport and holds its content to 1240px, so it is a band on the page and not another column of body text.
  • The split. 64% to the statement and 36% to the gloss. The statement gets two or three lines at display size; the gloss gets three or four at reading size, and the difference in line count is what makes the row look dense at one end and airy at the other.
  • The ramp. Statements are a clamp() from 1.75rem to 2.875rem at line-height 1.02 with -0.035em tracking; the gloss has a 15px floor at line-height 1.7; the header is 15px with 0.2em tracking. No bare font-size preset appears anywhere, because core's small is 13px.
  • The rules. Every row is opened by a hairline and the last is closed by one, so the run reads as a ruled table rather than as four paragraphs with air between them.
  • Where it stacks. Below 782px WordPress stacks the columns, so each row becomes the statement and then its gloss, with the hairlines still separating the rows. The scale collision survives the stack, because it is a difference in size rather than a difference in position.

What to change first

  1. The four statements. Four to seven words each, and they read better as sentences with a full stop than as labels. They are set at a size that punishes a clause.
  2. The gloss. One or two sentences. A single short line leaves the right of the row looking empty against the statement beside it.
  3. The number of rows. Duplicate a row group. Keep the closing hairline on whichever row ends up last: it is the bottom border on that group, not a separate block.
  4. The header. The small heading and its line are optional. Delete the header group and the run starts on its first rule, which is a stronger opening for a section that follows a hero.
  5. The split. 64/36 is tuned for a statement of five words. A longer statement wants 70/30 so it still breaks into two lines.
Notes76 words
  • Core blocks only: group, paragraph, heading, columns, column. No plugin, nothing to keep updated.
  • The hairlines are per-side group borders rather than separator blocks, which is what lets each rule sit tight against its row's padding.
  • Text is measured against the ground it actually sits on at 4.5:1; the statements are large enough to qualify at 3:1 but are held to the same pair as the gloss, because they use the same chain.
Back to the library

Continue exploring

Next in Features

Explore all 15 Features patterns