# 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. Canonical: https://patternpaste.com/pattern/faq-lead-rail.html Section: FAQ Access: Included in Pattern Paste access. Needs: 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. Blocks: column, columns, details, group, heading, paragraph, separator Keywords: faq, questions, answers, featured question, support Promise: Identical markup in every theme. --- ## 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. ## 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. ## 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. ## What you change first 1. **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. 2. **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. 3. **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. 4. **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. 5. **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. ## 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.