# Feature grid

> An even three-column feature set with generous gutters, built around oversized index numerals set at display size where a small label would normally sit. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/feature-grid.html
Section: Features
Access: Free, and free to keep.
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, separator
Keywords: features, grid, columns, services

## Variations (3)

### Structural numerals (the default)

Identical markup in every theme.

Three columns on your base ground, each hung off a hairline in currentColor with its index numeral at display size.

### Navy and signal yellow

This variation states its own colours and states its own type: identical in every theme.

An electrician's six numbered services on navy, white headings and signal yellow numerals, rules and button, in a condensed Arial Narrow over Arial.

### Numbered services

Identical markup in every theme.

Six numbered services in a grid under a split header with two buttons, the numerals and rules following your theme's colours.


---

## The signature moment: structural numerals

The index numbers are the structure, not decoration. `01`, `02` and `03` are set
at display size, larger than the headings they introduce, in the slot where a
small uppercase label would normally sit. Each one hangs off a hairline rule that
runs the full width of its column, so the three rules and the three numerals form
the grid you actually read the section by. Remove the numerals and the pattern
loses its shape, which is the test of whether a device is structural.

The numerals are large text and are colour-filled from your palette rather than
from ours. Everything else in the section is held to a quiet floor so the
numerals stay the one thing you remember.

## What it inherits from your theme

Effectively all of the look:

- **Typeface.** The pattern states no font family anywhere. Headings, numerals
  and body copy all take whatever your theme sets, serif or sans.
- **Palette.** The ground is your `base`, the text is your `contrast`, and the
  numerals prefer your `accent-2` before falling back to `contrast`. Each of
  these is 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.
- **Spacing scale.** Section padding, the gutters between columns and the gaps
  inside each column all use the core spacing presets, so they resize with your
  theme's own rhythm rather than fighting it.
- **Rules.** The hairline above each numeral is drawn in `currentColor`, so it
  follows your text colour wherever your theme puts it, including in a dark
  style variation.

## What it decides for itself

- **Proportion.** The numeral scale, the tight negative tracking on the display
  type and the relaxed line height on the small body copy are the pattern's own,
  because that ramp is the design.
- **The grid.** Three even columns with a wide gutter, full-bleed ground with a
  1240px constrained inner. Below 782px WordPress stacks the columns to one, and
  the rule-plus-numeral pairing keeps each item reading as a distinct step rather
  than a run-on list.
- **The intro measure.** Heading and lede share a 640px measure inside the
  1240px grid, so the supporting line reads at a comfortable length instead of
  running the full width of the section at tablet size. Widen it and the lede
  becomes a wall; the grid below is the wide element and the intro is not.
- **Emphasis.** The numerals are deliberately larger than the headings. That
  inversion is the point of the pattern.

## What you change first

1. **The copy.** Three headings and three sentences. Keep the headings to three
   or four words so they sit on one line beside a numeral that size.
2. **The count.** Add or delete a column and renumber. Four columns still work at
   this measure; five will crowd the numerals, and at that point drop the numeral
   size a step.
3. **The numeral colour.** It is a chain, so the fastest change is to swap the
   first rung for whichever accent slug your theme actually uses. If you would
   rather the numerals matched the body text, delete the colour attribute
   entirely and they inherit `contrast`.
4. **The section padding.** The vertical padding uses the largest core spacing
   preset. Step it down if this section sits between two others that already
   carry their own air.

## The Navy and signal yellow look

A Styled variation for a trade, with its own colours, type and copy (an
electrician). Navy ground `#0f2240`, white headings, muted `#d3dbe8` copy and
signal yellow `#ffd100` numerals, 4px rules and a square filled button with a
navy label, beside an underlined call link. It carries six services on a grid
layout with a 20rem minimum column, three across at desktop and two at tablet,
where the base keeps three columns. Headings and numerals are a condensed stack
(Arial Narrow, Roboto Condensed, Arial), copy Arial. Every text pair is measured
on navy above 4.5:1. Take the base if you want your theme's colours.

## Display type

Off the theme's ladder on purpose, because the size is the composition:
- paragraph at clamp(3.5rem, 6.5vw, 5.25rem)