# FAQ spotlight > A FAQ with one question promoted to display size: a tracked eyebrow, the question everyone asks set at up to 64px across the full measure, and its answer always visible beneath at a bounded measure. A hairline then drops to a compact two-column grid of eight small disclosure rows, four a side, ruled between and stacking to one column on a phone. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/faq-spotlight.html Section: FAQ Access: Included in Pattern Paste access. Needs: 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. Blocks: column, columns, details, group, heading, paragraph, separator Keywords: faq, questions, answers, spotlight, featured question, support Promise: Identical markup in every theme. --- ## The signature moment: scale collision One enormous question against a tight grid of small ones, with nothing in between. The featured question runs from 34px on a phone to 64px on a desktop, tracked in to -0.035em on a 1.02 line height, so it reads as a block of type rather than a line of it. The eight rows beneath it are held to 16 to 18px. There is no intermediate size anywhere in the section: no headline above the eyebrow, no subhead over the grid, no lede. The jump from the one question to the other eight is the whole design, and it is what tells a visitor which question the business expects them to have before they have read a word. The second half of the idea is density. The featured answer is the only one shown in full and it is given air: a 38rem measure, 17 to 19px, a 1.55 line height, and the largest gap in the section below it. The grid is packed by comparison, two columns of 45px rows with the least air the spacing scale offers. Airy above, dense below, one hairline between. ## Why this is not the FAQ list `faq-list` inverts scale between a label and a list: every question is set larger than the section label beside it, and the list is the composition. Here the list is deliberately the quiet part. Eight questions are demoted to a compact grid so that one question can be promoted to display size, and the section has a single focal point instead of a ruled column of equals. The test is what happens if you delete the big question: `faq-list` loses nothing it cannot spare, and this pattern loses its reason to exist. It is also not `faq-lead-rail`, which takes the same nine questions and sets them side by side: the featured pair holds a 55% column and the eight rows run down a rail beside it. That one keeps the big question in view while the list is read and sits about half as tall. This one spends the height instead, gives the question the full 1240 and a ceiling of 64px, and reads top to bottom. It is also not the numeral family. `feature-grid`, `stat-row` and `error-404` all put a number at display size; this section sets a sentence there, and there is no index, no figure and no numeral anywhere in it. ## Mechanics worth knowing - **`core/details` is core.** The block landed in WordPress 6.3, and this pattern uses none of its later additions. 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 grid, the first row ships open (`showContent: true`) so the grid 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 band is wider than that and full width wherever it is not. The grid answers use the same device at 32rem. Neither needed re-tuning when the same material was recomposed side by side as `faq-lead-rail`, which is the point of deriving a measure from the thing it measures. - **Every grid 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 grid its even rhythm at the same time. - **The two columns share one rule.** The full-width hairline under the featured answer is the top rule of both columns, and each column ends on a rule of its own. The columns block carries a vertical block gap of zero, so when core stacks it below 782px the left column's closing rule becomes the right column's opening one and the list reads as a single ruled stack with no doubled line and no gap. - **The gap above the grid is the rule's, not the layout's.** Inside a constrained group every child normally gets the theme's block gap above it. The separator states `margin-top` from the spacing scale and the columns block states `margin-top: 0`, and an inline margin beats the layout stylesheet, so the rule sits tight against the first row of the grid and the air sits above the rule. - **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 the only affordance telling a visitor a row can be opened. - **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, the gutter between the two columns and the gap above the dividing rule are all 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. - **Proportion.** The display ramp `clamp(2.125rem, 5vw, 4rem)` 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 on 1.55 and the row answers at 15 to 16px on 1.6. - **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. - **The grid.** Two equal columns, four rows each, full-bleed ground with a 1240px constrained inner. They are equal because they hold the same thing: the promotion has already happened above the rule, and a grid that ranked its eight leftovers as well would be saying it twice. - **Row rhythm.** Every row sets its margins to zero and carries its air as padding, so the hairlines butt directly against the rows and each column reads as one ruled table rather than a stack of separate items. ## What you change first 1. **The featured question.** It is the section. Keep it to one sentence and under about sixty-five characters: at 64px across 1240px that is two lines, and on a phone it is four. If yours is short, the heading will sit 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 grid 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 columns balanced at the same count. 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 grid closed. The featured answer is open regardless. 5. **The gap above the grid.** It is the dividing separator's `margin-top`, the largest gap in the section by design. Step it down one preset if the section sits between two others that already carry their own air. ## 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.