Lead question, rest on a rail

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.

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.

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.

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 <details> 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.

• 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.

• 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.

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.

• 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. <summary> 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 <details> 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 <details> 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.