# 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. Six questions take up less height than the headline block, so the section reads as an offer to answer rather than a manual to browse. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/faq-list.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: button, buttons, column, columns, details, group, heading, paragraph, separator Keywords: faq, questions, answers, accordion, support ## Variations (8) ### Ruled list (the default) Identical markup in every theme. The headline, the lead line and the action sit in their own column, and the questions run down the wider one as a dense ruled list that opens and closes on the browser's own disclosure. Your base, your contrast, hairlines in currentColor. ### Bough This variation states its own colours and states its own type: identical in every theme. The Bough tree surgeon set: a lichen-tinted band, Before we climb in bold Rockwell, six questions in bold Rockwell on muted pine hairlines opened by a leaf-green rule, about council permission and Tree Preservation Orders, nesting season, the wood, insurance, storms and stumps, answers in Trebuchet, a filled pine call button. ### Crumb This variation states its own colours and states its own type: identical in every theme. The Crumb café set: menu questions on an oat ground, the questions in Georgia over Helvetica answers between oat hairlines, an espresso pill button. ### Mend This variation states its own colours and states its own type: identical in every theme. The Mend physio set: clinical white ground, deep teal ink, questions on mint-grey hairlines opened by an apricot rule, about referral, what to wear and insurance, a teal 6px-corner button, all in Avenir Next. ### Night list Identical markup in every theme. The colour axis, done the only way the contract guarantees: the whole section inverts to your contrast with your base on it, hairlines following the type, and the action inverting back. Every theme has both slugs, so this arrives everywhere. ### Paper and ember This variation states its own colours: identical in every theme. States its own colours instead of inheriting yours: ink on warm paper with the headline in ember, identical in every theme and matching none. Take this one if you want this palette exactly; take either of the others if you want your site's. ### Tideline This variation states its own colours and states its own type: identical in every theme. States its own colours and Georgia face: a guesthouse welcome in navy on cream, with Georgia questions on a powder-blue panel beside it and an underlined link in place of the button. Identical in every theme and matching none. ### Vow This variation states its own colours and states its own type: identical in every theme. The Vow wedding set: a wisteria band, the questions in Didot between wisteria hairlines, answers in Gill Sans held to a reading measure, and a square midnight button to ring Ruth. --- ## The signature moment: the ask is the biggest thing on the page Every other FAQ in this library promotes the questions. This one demotes them. The headline in the header column runs up to 52px; the questions beside it sit at 17 to 19px, the size of the answers, in rows tight enough that six of them occupy less height than the headline block does. So the section reads as an offer to answer rather than as a manual to browse: the eye lands on the ask, takes the list in as one dense object, and finds the button already there rather than dangling under the last row. That is weight asymmetry, and it is the whole design. Set the questions large and it becomes a list with a caption. Take the header column away and it becomes a full-width run of disclosures. The proportion between the two halves is the product. **This is a rework, and it is worth saying why.** The pattern shipped with a 14px tracked label in the header column and questions at up to 34px, which is the same shape as `faq-ledger`: a narrow tracked label column against a wide column of ruled disclosures, question at roughly twice the label. Two patterns that read as one card on the section page are one pattern and a defect, so this one moved. `faq-ledger` keeps the small hanging label, because a repeated topic label is what its composition is for. ## Why this is not the FAQ ledger, or the FAQ measure - `faq-ledger` groups its questions under repeated topic labels that hang in the margin, and divides the band with rules of two different lengths. It is the one to take when the questions fall into groups. - `faq-measure` refuses the split: one column at the full 1240, questions at display size, answers stepped in. It is the one to take when the FAQ is the whole page. - `faq-list` is the one to take when the FAQ sits on a sales page and the point of it is the sentence at the top and the button under it. ## Mechanics worth knowing - **`core/details` is core.** The block landed in WordPress 6.3. The `name` attribute that powers exclusive accordions arrived later and is not used here, so nothing in this pattern depends on a recent addition. - **The question line box is a 45px band, on purpose.** `` is not a block, so no block attribute can put padding on it; the only property that reaches it is what the `
` passes down by inheritance. Its height is therefore its line box and nothing else, and at 17px an ordinary 1.2 line height gives a 20px row, which is half of a usable touch target. `line-height: max(45px, 1.15em)` makes every single-line question a 45px band at every size, which clears the 44px target and gives the ruled list its even rhythm. It applies PER LINE, so a question that wraps on a phone opens a 45px gap inside itself and nothing warns you: the questions here are all under 26 characters, and the fix for a long one is shorter copy, never a looser line box. - **The answer measure is bounded by the content, not the viewport.** The answer's `padding-right: max(0rem, 100% - 32rem)` resolves its percentage against the row's own width, so the answer is exactly 32rem wide wherever the row is wider than that and exactly full width wherever it is not. A first draft used a `vw` expression instead and read at 95 to 101 characters per line in themes whose content width was not the one it had been tuned against: a measure has to be derived from the thing it is measuring. - **The answer is set a step under the question**, at 15 to 16px against the question's 17 to 19px, with the question at weight 600. With both at the same size and weight an opened row loses its hierarchy, which at this scale is the only hierarchy the row has. - **The closing action is a button, not a link in a sentence.** The 45px trick above does not transfer: an inline `` takes its height from the font's em box, so line-height opens space around it without making the box itself tappable. Anything clickable that is not a `` is a `core/buttons` block with its own padding. - **The header column stacks first on a phone.** Core stacks columns below 782px, so at 390 the headline, the lead line and the button arrive above the questions, which is the reading order this pattern wants anyway. If you would rather the action closed the section, move the buttons block to the end of the list column. - **The first row ships open** (`showContent: true`). A section whose every row is shut shows a visitor nothing about what is inside it, and it shows you nothing in a preview either. - **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 the row can be opened, which is a good reason not to want it gone. A FAQ with no triangle is not this design with the marker removed, it is a different composition: `faq-open-index`. - **Typography cascades down the row.** Size, weight, tracking and line height are set once on the `
` and the question inherits them; the answer paragraph then resets all four to its own values. Change the question scale in one place per row, not two. ## The variations Each is a complete file you copy instead of the base, and each changes one idea. - **Night list.** The colour axis, using the only move the contract can promise everywhere: the section inverts to your `contrast` with your `base` on it, the hairlines follow the type because they are `currentColor`, and the button inverts back so it stays the loudest element rather than a hole in the band. Both slugs exist in every stock block theme, which a tint would not. - **Paper and ember.** The colour axis again, the other way: it declares `"colour": "stated"` and carries its own palette, ink `#1d2733` on paper `#f5f2ec` with the headline in an ember `#8c3b1b`. Identical in every theme and matching none, which is right for a buyer who wants exactly this palette and wrong for one who wants their site's. - **Tideline.** A second stated palette in a hospitality voice: navy `#183b50` on cream `#faf7ef`, the questions held on a powder-blue `#e0edf1` panel in the list column, a tracked kicker over a larger display headline (up to 80px), and an underlined link in a 44px transparent button box in place of the filled one. Colour and the Georgia face on its headline and questions are stated. ## What it inherits from your theme - **Typeface.** The base, Night list and Paper and ember inherit your theme's font family. Tideline states Georgia on its headline and questions; its answer copy still inherits your theme's body face. - **Palette.** In the base and in **Night list**, the ground and every piece of text are your `base` and `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. **Paper and ember** is the exception and says so on its tab: it states its three colours outright. - **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 both 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 gap between the two columns and the gap above the button are all core spacing presets, so the rhythm resizes with your theme rather than against it. ## What it decides for itself - **The weight asymmetry.** A display headline against questions at reading size is the design, and it is the one thing to leave alone. - **The 42/58 split**, wide enough on the left to give a 52px headline three words a line, narrow enough on the right that a 32rem answer reads as a measure rather than a shortfall. - **Proportion.** The headline at `clamp(2rem, 3.6vw, 3.25rem)` with -0.03em tracking on a 1.04 line height; the questions at `clamp(1.0625rem, 1.25vw, 1.1875rem)` at weight 600 in a 45px band; the answers at 15 to 16px on a 1.65 line height. - **The answer measure**, at 32rem: roughly 70 to 80 characters in the faces these themes ship, and it releases to full width the moment the column is narrower than that. - **Row rhythm.** Every row sets its own margins to zero and carries its air as padding instead, so the hairlines butt directly against the rows and the list reads as one ruled table rather than a stack of separate items. ## What you change first 1. **The headline.** It is the section now, so it is the first thing to write. One sentence, three or four words a line at 42% of the band. 2. **The copy in the rows.** Six questions and six answers. Keep a question under about 26 characters so it holds one line at 390px, and remember that the answer is the place for the detail the question cannot hold. 3. **The count.** A row is a separator followed by a details block. Copy that pair to add one, delete the pair to remove one, and keep the closing separator so the list ends on a rule. 4. **The button's destination.** It ships with no `href`, which is what the editor writes before a link is chosen; point it at your contact page. If you would rather not have an action here, delete the buttons block and the line above it, but do not replace them with a link inside a sentence: an inline link is too small to tap on a phone and nothing warns you about it. 5. **Which row starts open.** Move `"showContent":true` (and the matching `open` on the `
` tag) to whichever question you most want read, or delete both and ship the list closed. ## A note on the answer copy The six answers are real answers, not filler, and two of them make claims about the product rather than about this section. The plugin answer in particular is written to be true under the three axes: the default promise is no plugin at all, a section that needs the companion plugin says so on its own page before you buy, and it stays legible with the plugin switched off. If you keep our copy rather than writing your own, keep it true of what you sell. ## Contrast Every pair in the base and in **Night list** is your `contrast` on your `base`, or the reverse, which is the pair your theme already ships body copy on; the button reverses it again. The headline is large display text and is claimed at 3:1. Everything else is body text at 4.5:1, the questions included: at 17 to 19px they are no longer large text by the WCAG definition, which is a consequence of the rework worth stating rather than assuming. **Paper and ember** is measured on the values it actually paints: ink on paper 13.5:1, the ember headline on paper 6.8:1, and paper on ink for the button 13.5:1. **Tideline** paints navy on cream at 11.0:1 and navy on the powder panel at 9.9:1, every piece of text on one of those two pairs. The hairlines are structural marks in `currentColor` and carry no text.