# 404 search

> A 404 that offers the one thing a lost visitor can use: a working search field set at display size and running the full measure, so the field is the largest thing on the page and the apology is the caption above it. Under a rule, three recent posts from your own site, dated. The field and the three entries are dynamic core blocks, so they search and list your content; the preview here is sample data. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/error-search.html
Section: 404
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: group, heading, paragraph, post-date, post-template, post-title, query, search
Keywords: 404, not found, search, error page, recent posts

Promise: Identical markup in every theme.

---

## It shows YOUR site, and the preview is our sample content

The field searches your content, and the three entries are your three most
recent posts, dated. The preview on the product page is our preview site's
seeded writing. Nothing in the pattern names a post.

Unlike the other dynamic patterns in this batch, this one needs no post context:
the query states its own terms rather than inheriting a template's, which is
right for a 404 because a 404 has no query to inherit. So it renders wherever it
is pasted, and it belongs in the 404 template.

## The signature moment: the field is the biggest thing on the page

**The search input is set at up to 48px and runs the whole 1240 measure, and the
apology is the caption above it.** Every other 404 in this catalogue makes a
mark out of the number. Here the number is a 13px tracked label, the headline is
38px, the instruction is 18px, and then the largest object on the page is a form
control. The scale ramp runs the wrong way on purpose, and that inversion is the
whole design: the page stops being an announcement that something is missing and
becomes the tool for finding it.

The floor is held at 28px so the field is still the largest thing at 390, where
the headline is 24px.

Under it, one `currentColor` rule, a 13px tracked label, and three dated entries
in a grid that reflows from three columns to one. They are unruled, because a
ruled index is what `error-split` does, and because after a rule that long the
page has had enough structure.

## Why it is not `error-404` or `error-split`

`error-404` is one centred numeral at extreme size and nothing else.
`error-split` is left-aligned, with the numeral huge on one side and a ruled
index of destinations on the other, and it deliberately has no search field.
This one has no numeral at display size at all, and it is the only 404 in the
catalogue that is dynamic: it queries the site it is installed on.

## What it inherits from your theme

- **The typeface.** No font family is stated.
- **Your colours.** The band asks for `base` and the type for `contrast`, both
  ending on a colour WordPress guarantees. The one rule is `currentColor`.
- **The field itself.** Its border, its background and its submit button are
  your theme's form styling, and the pattern deliberately states no colour on
  the search block. Measured: a text colour stated on `core/search` is copied
  onto the SUBMIT BUTTON as well as the input, and Twenty Twenty-Four had
  already given that button a `contrast` background, so a contrast chain
  painted the magnifier the same colour as the button behind it, ratio 1.0.
  What this pattern states on the search block is its size and nothing else.

## What it decides for itself

- **Full bleed with a 1240px measure**, the message held to a 40rem column at
  the left, the field the full width under it. Measured at 1400 in Twenty
  Twenty-Four: 753px; at 390: 528px, no horizontal overflow.
- **`minimumColumnWidth: 22rem`** on the post template's grid rather than a
  fixed column count, so three entries become one column on a phone instead of
  three squeezed ones.
- **`h1`,** with its own explicit colour, because a theme's heading element
  style beats a colour inherited from the wrapping group.
- **Three posts, newest first**, stated in the query rather than inherited.

## What to change first

1. **The field's ceiling.** `clamp(1.75rem, 3.6vw, 3rem)`. It is the signature;
   lower it and the pattern becomes an ordinary 404 with a search box.
2. **The headline and the instruction.** Both are ordinary text.
3. **The number of entries.** `perPage` on the query. Four still fits the grid.
4. **The query's terms.** Change `postType`, or add a category, if your 404
   should point at something more specific than "recent".
5. **The rule under the field.** It is a `border-top` on the group that holds
   the entries, not a separator block, and it is the only structure on the page.
   Delete it and the entries read as a caption to the field rather than as the
   second thing on it.

## Notes

- Core blocks only: group, paragraph, heading, search, query, post-template,
  post-date, post-title. No plugin, no script.
- No `core/query-total`: it is a recent core block, and an older WordPress
  parses it as `core/missing`.
- Valid at WordPress 7.0.