Lead question, rest on a rail, Pattern Paste Canonical: https://patternpaste.com/pattern/faq-lead-rail.html Library (https://patternpaste.com/patterns/) FAQ (https://patternpaste.com/patterns/faq/) Catalogue access Standard # Lead question, rest on a rail One question answered in full with the other eight on a rail beside it: a tracked eyebrow, a question set at up to 56px and an answer that is always open hold a 55% column, and eight small disclosure rows run down a single ruled 45% column on the right, starting on a rule so the rail reads as a table from its first line. The big question stays in view while the list is read, and the section sits shorter on the page than a stacked FAQ can. States no colour and no font of its own. Start here ## What you change first - The featured question. It is the section. - The featured answer. Three or four sentences. - The eight rows. Keep questions to five or six words so they sit on one line inside a 45px band at tablet width; a question that wraps becomes a 90px band and the rail loses its evenness. - Which row starts open. Move "showContent":true and the matching open on the

tag to whichever row you most want read, or delete both and ship the rail closed. - The split. 55/45. The signature moment ## The big question never leaves the screen Scale collision held side by side instead of stacked. One question at display size against eight at 16 to 18px, with no intermediate size anywhere: no headline over the eyebrow, no subhead over the rail, no lede. That much this shares with a stacked spotlight. What this composition adds is that the two halves are read at the same time. A visitor working down the rail still has the promoted question and its answer in view, so the section keeps saying which question the business expects them to have for as long as they are in it. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - The hairlines. - Spacing scale. ### Set by this pattern - The collision. - The 55/45 split. - Proportion. - The measures. 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 One question answered in full, with the rest of the FAQ on a rail beside it. A small tracked eyebrow, "The one everyone asks", sits over a single question at display size in a 55% column, with its answer always visible beneath at a bounded measure. The other eight run down a single ruled 45% column on the right as native core/details rows, opening on a rule so the rail reads as a table from its first line. No cards, no boxes and no accordion plugin: opening and closing is the browser's own behaviour and the section carries no JavaScript of any kind. ### The signature moment: the big question never leaves the screen Scale collision held side by side instead of stacked. One question at display size against eight at 16 to 18px, with no intermediate size anywhere: no headline over the eyebrow, no subhead over the rail, no lede. That much this shares with a stacked spotlight. What this composition adds is that the two halves are read at the same time. A visitor working down the rail still has the promoted question and its answer in view, so the section keeps saying which question the business expects them to have for as long as they are in it. The second half of the idea is the exchange of height for width. A stacked spotlight spends the full 1240 on the big question and then spends more height again on two columns of rows; this one spends width instead, and the section sits roughly half as tall on the page. That is what makes it the FAQ to drop between two other sections rather than the FAQ to build a page around. ### Why this is not faq-spotlight, and not faq-list faq-spotlight is the stacked answer to the same brief: the question runs the full measure at up to 64px and the eight rows sit beneath it as a two-column grid. It is the one to take when the FAQ opens a page and can have the height. This one drops the question's ceiling to suit a narrower column and puts the rows beside it instead. Take it when the section has to sit shorter, or when the big question should stay in view while the list is read. faq-list inverts scale between a label and a list, and its questions are the composition. Here the list is deliberately the quiet part: eight questions are demoted to a rail so that one can be promoted. The test is what happens if you delete the big question. faq-list loses nothing it cannot spare; this pattern loses its reason to exist. Make it yoursVariations and the edits to make first ### What you change first - The featured question. It is the section. Keep it to one sentence and under about sixty-five characters: at 56px across a 55% column that is two or three lines, and on a phone it is four. If yours is short, the heading sits on one line and the collision gets louder, which is fine. - The featured answer. Three or four sentences. It is the only answer a visitor is guaranteed to read, so put the thing they most need to know in the first one. - The eight rows. Keep questions to five or six words so they sit on one line inside a 45px band at tablet width; a question that wraps becomes a 90px band and the rail loses its evenness. A row is a details block followed by a separator: copy the pair to add one, delete the pair to remove one, and keep the separator above the first row so the rail opens on a rule. - Which row starts open. Move "showContent":true and the matching open on the

tag to whichever row you most want read, or delete both and ship the rail closed. The featured answer is open regardless. - The split. 55/45. Widening the left column raises the question's line count and narrows the rail towards the point where its answers wrap badly; narrowing it does the reverse. It is the one dial here with two costs. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. No font family is stated anywhere. The display question, the rows and the answers all take whatever your theme sets, serif or sans. The ramp was checked in both. - 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, so the section paints in a theme with a full palette and still paints in a theme with none. No accent slug appears anywhere, in any rung: an accent's brightness is unknowable, and this section is nothing but text on a ground. - The hairlines. They are core/separator blocks with no colour of their own, so they take your theme's separator style: a 1px currentColor rule in Twenty Twenty-Four and Twenty Twenty-Five, and a 2px currentColor rule in a theme that styles nothing. They cannot blank, because a colour is never named. - Spacing scale. Section padding, the air inside each row and the gutter between the two columns are core spacing presets, so the rhythm resizes with your theme rather than against it. ### What it decides for itself - The collision. One question at display size, eight at 16 to 18px, and nothing at any size between. This is the design and the one thing to leave alone. - The 55/45 split. The featured half is the wider one by a little and the louder one by a lot. A bounded measure needs a column edge to stop against or it reads as a shortfall, which is the same reason faq-list is 42/58. - Proportion. The display ramp clamp(2.125rem, 4.4vw, 3.5rem) behind the xx-large rung, at -0.035em on a 1.02 line height; the eyebrow at 13 to 14px with 0.18em tracking; the rows at clamp(1rem, 1.2vw, 1.125rem), weight 500, in a 45px band; the featured answer at 17 to 19px and the row answers at 15 to 16px. The ceiling is 56px rather than the stacked pattern's 64px, because 64px across a 55% column puts two words on a line; the floor and the tracking are unchanged, so a phone sees exactly what the stacked version shows it. - The measures. 38rem for the featured answer, roughly 65 to 75 characters in the faces the stock themes ship; 32rem for the row answers. Both release to full width the moment their container is narrower. ### Contrast Every pair is your contrast on your base, which is the pair your theme already ships body copy on. The featured question is large text at 34px and above and clears 3:1 at any ratio the body pair passes; the row questions, the eyebrow and every answer are body text and are held to 4.5:1. The hairlines are structural marks in currentColor and carry no text. Technical notesBlock mechanics, responsive behaviour and constraints ### Mechanics worth knowing - core/details is core, and it is safe at the 6.6 floor. The block landed in WordPress 6.3, and its block.json and save() output are identical in 6.5.5 and 6.7.1, which brackets the 6.6.7 matrix entry. The name attribute that powers exclusive accordions arrived later and is not used here. - The featured answer is a paragraph, not a details block. It is always visible by construction: there is nothing to open, nothing to remember to ship open, and nothing a visitor has to discover. In the rail, the first row ships open (showContent: true) so the column shows what a row holds. - Both measures are bounded by their content, not the viewport. The featured answer's padding-right: max(0rem, 100% - 38rem) resolves against the paragraph's own width, so it is exactly 38rem wide wherever the column is wider than that and full width wherever it is not. The rail's answers use the same device at 32rem. Neither needed re-tuning when the composition moved from stacked to side by side, which is the point of deriving a measure from the thing it measures. - Every rail question is a 45px band, on purpose.

is not a block, so no attribute can put padding on it; its height is its line box and nothing else. At 16px an ordinary 1.2 line height gives a 19px row, which is under half of a usable touch target. line-height: max(45px, 1.15em) on the

makes every single-line question a 45px band, which clears the 44px target and gives the rail its even rhythm at the same time. It applies PER LINE, so a question that wraps opens a 45px gap inside itself and nothing warns you: the fix for a long question is shorter copy, never a looser line box. - The rail starts on a rule and ends on one. A separator above the first row gives the column a top edge without a border, and each row closes on its own, so the eight rows read as one ruled table rather than eight stacked items. Every row states its margins as zero and carries its air as padding, which is what lets the rules butt against the rows. - Where it stacks. Core stacks columns below 782px, so a phone sees the eyebrow, the featured question and its answer first, and the rail beneath it. That is the same reading order the section has at full width, so nothing about the design has to be explained twice. - The disclosure marker is the browser's, not ours. It cannot be restyled from block attributes, and CSS a block attribute cannot express lives in the companion plugin rather than in a pattern, so the triangle stays. It is also the only affordance telling a visitor a row can be opened. A FAQ composed so that there is nothing to open is a different pattern, faq-open-index. - Typography cascades down each row. Size, weight, tracking and line height are set once on the

and the question inherits them; the answer paragraph resets all four. Change the row scale in one place per row. - The display heading states its own colour. A theme's heading element style beats a colour inherited from the wrapping group, which is how a headline ends up the same colour as its band. The h2 carries the same contrast chain as the band's text, explicitly. 18KB of core-block markup, 7 blocks (column, columns, details, group, heading, paragraph, separator), 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 Pricing Pricing cover menu A screen-height cover with three plans set on it like a restaurant menu: a heavy veil of your theme's contrast colour over the photograph, a display headline in the lower left and a narrow ruled price list in the right-hand column, each plan a name and its price on one line and a sentence beneath, hairline rules between, one button under the list. The list drops beneath the headline on a phone. Includes a replaceable example photograph and placeholder prices. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it. (https://patternpaste.com/pattern/pricing-cover-menu.html)Tables Compare matrix A capability matrix in a core table: one row per capability, one column for each of the two plans people choose between, and a mark in every cell, with a third plan named in one line under the table instead of a fourth column that would ladder its row headers on a phone. The recommended column is announced by a two-pixel bracket that stands over it and hands off to the table's own hairlines, so nothing is filled and nothing is coloured. Three fixed columns hold roughly 117 pixels each at 390. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-matrix.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.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, details, group, heading, paragraph, separator Core only yes Chains 24, deepest 3 rungs currentColor no color base, black, contrast, role-label, white spacing 20, 30, 40, 50, 70, 80 font-size medium, xx-large Continue exploring ## Next in FAQ Explore all 13 FAQ patterns (https://patternpaste.com/patterns/faq/) Shot in Twenty Twenty-Five FAQ FAQ Standard ### FAQ index An editorial inquiry index structured as full-width ruled rows. 6 blocks · 1 variation Open preview (https://patternpaste.com/pattern/faq-index.html) Night index (https://patternpaste.com/pattern/faq-index.html#variant=night-index) Shot in Twenty Twenty-Five FAQ FAQ Free Standard ### FAQ ledger A display headline over three topic rows. 7 blocks · 1 variation Open preview (https://patternpaste.com/pattern/faq-ledger.html) Night ledger (https://patternpaste.com/pattern/faq-ledger.html#variant=night-ledger) Shot in Twenty Twenty-Five FAQ FAQ Standard ### FAQ list A two-column FAQ in which the invitation is the loud half: a display headline, one line of orientation and the action fill the header column, while six native disclosure rows run beside it as a compact ruled list at reading size. 9 blocks · 2 variations Open preview (https://patternpaste.com/pattern/faq-list.html) Night list (https://patternpaste.com/pattern/faq-list.html#variant=night-list)Paper and ember (https://patternpaste.com/pattern/faq-list.html#variant=paper-and-ember)