Index beside the field, Pattern Paste Canonical: https://patternpaste.com/pattern/error-index-rail.html Library (https://patternpaste.com/patterns/) 404 (https://patternpaste.com/patterns/error/) Catalogue access Standard # 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. The field runs only as wide as the words above it, so the apology, the tool and the way back are all in one glance. The field and the 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. Start here ## What to change first - The split. 60/40. - The headline and the instruction. Both are ordinary text. - The number of entries. perPage on the query. - The query's terms. Change postType, or add a category, if the rail should point at something more specific than "recent". - The label over the rail. "Recently published" is the only thing naming what the second column is. The signature moment ## The rule turns a list into a rail One vertical hairline down the inside edge of the second column is the only structure in the section, and it does all the work. The recent posts are not a footer under the message and not a grid across the foot of the page; they are a rail standing beside it, and the rule is what says so. Every entry then hangs under a horizontal rule of its own, so the rail reads as a ruled column rather than as three loose items, and the first of those rules meets the vertical one at the top corner. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - The field itself. - The post titles' link colour. ### Set by this pattern - Full bleed with a 1240px measure - The field's ceiling, dropped for the narrower column. - h1 with its own explicit colour - Three posts, newest first - The rail's rules are borders, not separator blocks. - Where it stacks. 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 404 in two columns. The apology, the headline, one line of instruction and a working core/search hold a 60% column; the site's three most recent posts stand beside them in a rail, closed off by a vertical hairline and ruled entry by entry. It is the 404 to take when the page has to stay short. ### The signature moment: the rule turns a list into a rail One vertical hairline down the inside edge of the second column is the only structure in the section, and it does all the work. The recent posts are not a footer under the message and not a grid across the foot of the page; they are a rail standing beside it, and the rule is what says so. Every entry then hangs under a horizontal rule of its own, so the rail reads as a ruled column rather than as three loose items, and the first of those rules meets the vertical one at the top corner. The consequence is the composition. Because the entries have taken the width they need, the field can only run as wide as the words above it, which makes it a tool sitting inside a message rather than the message itself. The page reads as two parts, "here is what happened and here is the search" against "here is what is new", and neither half has to be read before the other. Every rule is currentColor, so it is exactly the colour of the text beside it on any ground the theme gives it, and it cannot resolve to nothing. ### Why it is not error-search, error-404 or error-split error-search stacks the same material in three parts and makes the field the largest object on the page, running the whole 1240 at up to 48px. This one turns the page through ninety degrees: the field is held to 24 to 36px inside a 60% column, and what it buys with the height it saves is the rail. error-404 is one centred numeral and nothing else. error-split is a huge numeral against a ruled index of destinations, and deliberately has no search field at all. Make it yoursVariations and the edits to make first ### What to change first - The split. 60/40. Push it to 65/35 if your recent titles are short, and no further: below about 30% the dates and the titles begin to wrap against each other. - The headline and the instruction. Both are ordinary text. - The number of entries. perPage on the query. Four fits the rail at 1400 and adds roughly 90px of height. - The query's terms. Change postType, or add a category, if the rail should point at something more specific than "recent". - The label over the rail. "Recently published" is the only thing naming what the second column is. If you change the query, change it too. Theme behaviourInheritance, fixed decisions and contrast ### 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. Every 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 on the base: 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. - The post titles' link colour. The entries state the contrast chain on the link as well as the text, so a theme's link colour does not arrive in the rail as a fourth colour. ### What it decides for itself - Full bleed with a 1240px measure, split 60/40 with the gutter on the spacing scale. - The field's ceiling, dropped for the narrower column. clamp(1.5rem, 2.6vw, 2.25rem), against the base's clamp(1.75rem, 3.6vw, 3rem). At 60% of 1240 the base's ramp puts three or four words on a line of placeholder and leaves the submit icon crowding the column edge. - h1 with its own explicit colour, because a theme's heading element style beats a colour inherited from the wrapping group. It takes the x-large rung as a chain rather than display type: the headline is hierarchy here, not the composition. - Three posts, newest first, stated in the query rather than inherited. - The rail's rules are borders, not separator blocks. The vertical one is a border-left on the column and each horizontal one is a border-top on an entry group, which is why the post template carries a zero block gap: the rules butt against the padding and the rail reads as one table. - Where it stacks. Core stacks columns below 782px, so on a phone the message and the field arrive first and the rail follows. The vertical rule stays on the left edge of the entries, where it reads as a margin mark rather than as a seam, which is the reason it was left in place rather than dropped. Technical notesBlock mechanics, responsive behaviour and constraints ### 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. Like error-search, 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. ### Notes - Core blocks only: group, columns, column, paragraph, heading, search, query, post-template, post-date, post-title. No plugin, no script. - No core/query-total: it does not exist at WordPress 6.6 and parses as core/missing there. 5.8KB of core-block markup, 10 blocks (column, columns, group, heading, paragraph, post-date, post-template, post-title, query, search), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (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. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. 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 cover colophon A footer that ends the page on a photograph: a full-bleed cover under a heavy veil of your theme's contrast colour, a display-size sign-off high on it with an outlined contact button and one line of copy, four short link columns lower down, and along the very floor a hairline and the small print. The columns wrap two across on a phone. Includes a replaceable example photograph. States no colour and no font of its own. (https://patternpaste.com/pattern/footer-cover-colophon.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 6.7 to 7.0. 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/) #### What's inside Blocks column, columns, group, heading, paragraph, post-date, post-template, post-title, query, search Core only yes Chains 15, deepest 3 rungs currentColor yes color base, black, contrast, role-label, white spacing 20, 30, 40, 50 font-size medium, x-large Continue exploring ## Next in 404 Explore all 4 404 patterns (https://patternpaste.com/patterns/error/) Shot in Twenty Twenty-Five 404 404 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. 5 blocks Open preview (https://patternpaste.com/pattern/error-404.html) Shot in Twenty Twenty-Five 404 404 Standard ### 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. 8 blocks Open preview (https://patternpaste.com/pattern/error-search.html) Shot in Twenty Twenty-Five 404 404 Standard ### 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. 8 blocks · 1 variation Open preview (https://patternpaste.com/pattern/error-split.html) Index first (https://patternpaste.com/pattern/error-split.html#variant=index-first)