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

Canonical: https://patternpaste.com/pattern/feature-rows.html
Section: Features
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: column, columns, group, heading, paragraph
Keywords: features, rows, statements, ruled, benefits, list

## Variations (2)

### Ruled statements (the default)

Identical markup in every theme.

Four ruled rows on your base ground, each point set at display size against a small gloss, and rules in currentColor so they follow your text wherever your theme puts it.

### Night statements

Identical markup in every theme.

The colour axis, and the only move the contract guarantees everywhere: the section inverts to your contrast with your base on it. The hairlines invert with it, because they are stated as currentColor rather than as a colour of their own.


---

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

## Notes

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