FAQ spotlight: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/faq-spotlight.html Core Patterns (https://patternpaste.com/patterns/) FAQ (https://patternpaste.com/patterns/faq/) Catalogue access Standard # 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. ## All patterns Search patterns Loading patterns… 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 grid 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 grid closed. - The gap above the grid. It is the dividing separator's margin-top, the largest gap in the section by design. 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. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - The hairlines. - Spacing scale. ### Set by this pattern - The collision. - Proportion. - The measures. - The grid. - Row rhythm. 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 FAQ built around one question. A small tracked eyebrow, "The one everyone asks", sits over a single question set at display size across the full measure, with its answer always visible beneath it at a bounded measure. A hairline then drops to a compact two-column grid of the other eight questions as native core/details rows, four a side, small, medium-weight and ruled between. 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: 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. 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 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. - 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 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. - 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. - 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. 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, 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. ### 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. 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. Questions ## FAQ spotlight: common questions Does FAQ spotlight need a plugin? No. It is built only from core WordPress blocks (column, columns, details, group, heading, paragraph and separator), so it pastes into the block editor with nothing to install. Will FAQ spotlight match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. Is FAQ spotlight free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. Which WordPress version does it need? 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. 16KB 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. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (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. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. 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 Donate impact tiers Four donation cards for a charity, each amount set at display size over what it pays for, one plain line of how, and a Donate button on the foot. The third card is inverted as the most given gift, and a note under the cards carries the charity number, Gift Aid and a link to give another amount. States no colour and no font of its own. (https://patternpaste.com/pattern/donate-impact-tiers.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 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section FAQ Access Subscription Plugin None, core blocks only Variations 1 Colour From your theme Type From your theme Motion None Blocks column, columns, details, group, heading, paragraph, separator Presets color 5, spacing 7, font-size 2 WordPress 7.0+ Continue exploring ## Next in FAQ Explore all 16 FAQ patterns (https://patternpaste.com/patterns/faq/) Shot in Twenty Twenty-Five FAQ No plugin needed ### FAQ plate An FAQ designed as an isolated focal plate. FAQ Preview pattern (https://patternpaste.com/pattern/faq-plate.html) Shot in Twenty Twenty-Five FAQ No plugin needed ### Emergency triage list An emergency page section for a trade: a header with a legend of three verdict tags, then seven ruled rows sorted by urgency, each the problem as a card title, what to do now, and a verdict tag at the right: ring now, book it, or ring the gas line first. FAQ Preview pattern (https://patternpaste.com/pattern/emergency-triage-list.html) Shot in Twenty Twenty-Five FAQ No plugin needed ### FAQ bento An asymmetric bento layout pairing a large featured lead card on the left with four compact question tiles on the right. FAQ Preview pattern (https://patternpaste.com/pattern/faq-bento.html)