404 page: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/error-404.html Core Patterns (https://patternpaste.com/patterns/) 404 (https://patternpaste.com/patterns/error/) Free Standard # 404 page A 404 page built as one mark: the numeral set at extreme display size in a single centred column, with the message and its heading bounded to the numeral's own optical width so the two read as one block. Nothing else on the page competes with it. ## All patterns Search patterns Loading patterns… Start here ## What you change first - The button's link. It ships with no URL, exactly as the editor writes one before you choose a destination. - The message. Keep it to one or two short sentences and avoid words longer than about eleven characters: the measure is narrow by design, and on a phone it is roughly twenty characters a line. - The numeral's size. The clamp() on the 404 paragraph is the pattern's main dial. - The number itself. 500, 403 and 410 all have three digits and need no other change. The signature moment ## The numeral IS the composition 404 is set at up to 240px and it is not a decoration sitting above the real content. It is the content. There is no eyebrow above it, no rule beneath it, no card around it and no second column beside it, and everything that follows is held to a small, quiet floor so that the page has exactly one thing in it. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Spacing scale. - The button. ### Set by this pattern - Proportion, which here is the entire design. - The width lock. - The type floor. - Restraint. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview A single centred column on your page ground: the numeral, a one-line heading, a sentence, and one button. Core blocks only, so there is nothing to install and nothing to keep updated. ### The signature moment: the numeral IS the composition 404 is set at up to 240px and it is not a decoration sitting above the real content. It is the content. There is no eyebrow above it, no rule beneath it, no card around it and no second column beside it, and everything that follows is held to a small, quiet floor so that the page has exactly one thing in it. The message is bounded by the numeral's own width, not by a measure we picked. That is the part worth paying for, and it is the reason the heading and the sentence read as part of the mark rather than as a caption under it. It is built out of two facts about CSS that copy-paste markup can actually reach: - ch is the advance width of the digit zero in the current font. So 2.75ch is not an arbitrary length: it is very nearly the width of three digits, measured in whatever face your theme has set, and it re-measures itself when the theme changes. The numeral's own tracking of -0.04em pulls 404 in to about 2.78ch, so the text block below lands a hair inside the numeral rather than a hair outside it, in a serif face and a sans one alike. - A constrained group applies its content size to its children, and ch resolves against the child's own font size. So the group holding the heading and the sentence carries the numeral's font size, purely so that its ch is the numeral's ch; every block inside it states its own size and never inherits that. The text is a normal reading size inside a box measured in display-size digits. The consequence is that the block of text grows and shrinks with the numeral at every viewport, and the two edges stay aligned in a face with narrow figures and in one with wide figures. Nothing is nudged and nothing is measured by hand. A second constrained group sits above it as a ceiling of 26rem. That is deliberately loose: at the numeral's largest size the ch bound is around 23 to 26rem in the faces the stock themes use, so the ceiling normally does nothing. It exists so that a theme or a filter that ever refuses the ch value leaves a sensible measure behind instead of a sentence running the full width of the section. ### Why this is not the feature grid and not the stat row Three patterns in this catalogue set numerals large. They are three different jobs, and the test is what happens if you delete the numeral. - feature-grid uses numerals as labels made structural. 01, 02, 03 are index numbers promoted to display size, each hanging under a hairline that runs the width of its column, each introducing a heading and a paragraph. Delete them and the grid loses its shape but the content survives. - stat-row uses numerals as data. Four measured values with units, sitting on collinear rules that make a shared baseline visible across the band. Delete them and there is nothing left to report. - error-404 uses one numeral as the whole composition. There is no second numeral to align to, no rule under it, no unit beside it, no heading it introduces and no list it indexes. Instead of the numeral being sized to sit beside text, the text is sized and bounded to sit inside the numeral. It is also the only one of the three set at the theme's own text weight rather than at 700: the other two need weight to hold their own against a rule or a neighbour, and this one has no neighbour. Make it yoursVariations and the edits to make first ### What you change first - The button's link. It ships with no URL, exactly as the editor writes one before you choose a destination. Point it at your home page first. - The message. Keep it to one or two short sentences and avoid words longer than about eleven characters: the measure is narrow by design, and on a phone it is roughly twenty characters a line. - The numeral's size. The clamp() on the 404 paragraph is the pattern's main dial. If you change it, change the identical clamp() on the group that wraps the heading and the sentence to match, or the text stops tracking the numeral's width. Those two values are one decision written twice. - The number itself. 500, 403 and 410 all have three digits and need no other change. A different digit count means changing 2.75ch to roughly 0.92ch per digit. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. The pattern states no font family anywhere. The numeral, the heading and the sentence all take whatever your theme sets. The width lock is measured in ch, so it is re-derived from your face rather than tuned to ours. - Palette. The ground is your base and every piece of text is your contrast, each written as a fallback chain ending on a colour WordPress itself guarantees. The button inverts the same pair. No accent slug appears anywhere, in any rung: an accent's brightness is unknowable, and this section is nothing but text on a ground. - Spacing scale. The section padding and the three gaps use the core spacing presets, so the page breathes at your theme's rhythm. - The button. It takes your theme's button element styles for everything except its colours, its square corners and its padding. ### What it decides for itself - Proportion, which here is the entire design. The numeral runs from 88px at the smallest screens to 240px above roughly 860px of viewport, tracked in by -0.04em and set on a 0.82 line height so it reads as a solid block rather than as a line of type. - The width lock. Described above. This is the pattern. - The type floor. The heading and the sentence both bottom out at 15px, and the heading is a real h1 reading "Page not found" rather than the numeral, because 404 is not a page title anyone can hear read aloud. - Restraint. One button and nothing else. A search field, a menu or a set of popular links would all be defensible on a 404 page and all of them would break the one idea this pattern has. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(5.5rem, 28vw, 15rem) Questions ## 404 page: common questions Does 404 page need a plugin? No. It is built only from core WordPress blocks (button, buttons, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will 404 page match my theme? Choose by variation. 404 page takes your theme’s palette; Mint and cherry brings its own colours. How many variations does 404 page have? 2: 404 page and Mint and cherry. Each is its own markup; choose one in the toolbar above the preview before you copy. Is 404 page free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription. Which WordPress version does it need? 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Its Styled looks come with a subscription. Read the markup Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Header Nav bar A header bar on one line: a heavy, tightly tracked wordmark at the left edge against tiny widely tracked links at the right, one solid action beside them, and a hairline under the whole bar. The links are your WordPress menu, a core navigation block that folds to a menu button on a phone so the bar stays one line. Compact by construction, so it reads as the top of a page and never as a hero. States no colour and no font of its own. (https://patternpaste.com/pattern/nav-bar.html)Footer Footer booking fold A local-business footer drawn as an open fold: a broad field puts a display sign-off above the address, grouped hours and contact links; a narrower booking corner begins lower, enclosed by a heavy top edge and two sides. One closing rule joins both parts to the useful and legal links below. The two fields stack in reading order on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/footer-booking-fold.html)Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section 404 Access Free Plugin None, core blocks only Variations 2 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, group, heading, paragraph Presets color 5, spacing 6, font-size 1 WordPress 7.0+ Continue exploring ## Next in 404 Explore all 4 404 patterns (https://patternpaste.com/patterns/error/) Shot in Twenty Twenty-Five 404 No plugin needed ### 404 split A 404 built as a seam: the numeral at up to 176px on one side, a ruled index of four destinations on the other, and one unbroken currentColor hairline down the join that every row rule runs into. 404 Preview pattern (https://patternpaste.com/pattern/error-split.html) Shot in Twenty Twenty-Five 404 No plugin needed ### Index beside the field A 404 that reads in two parts rather than three: the label, the headline, one line of instruction and a working search field hold a 60% column, and the site's three most recent posts stand beside them in a rail closed off by a vertical hairline, each entry dated and hung under a rule of its own. 404 Preview pattern (https://patternpaste.com/pattern/error-index-rail.html) Shot in Twenty Twenty-Five 404 No plugin needed ### 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. 404 Preview pattern (https://patternpaste.com/pattern/error-search.html)