FAQ list: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/faq-list.html Core Patterns (https://patternpaste.com/patterns/) FAQ (https://patternpaste.com/patterns/faq/) Catalogue access Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What you change first - The headline. It is the section now, so it is the first thing to write. - The copy in the rows. Six questions and six answers. - The count. A row is a separator followed by a details block. - 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. - 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. 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. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - The hairlines. - Spacing scale. ### Set by this pattern - The weight asymmetry. - The 42/58 split - Proportion. - The answer measure - 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 two-column FAQ where the invitation is the loud half. A header column carries a display headline, one line of orientation and the action; beside it, in the wider column, six questions run as a compact ruled list of native core/details rows separated by hairlines. 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: 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. Make it yoursVariations and the edits to make first ### 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 you change first - 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. - 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. - 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. - 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. - 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. Theme behaviourInheritance, fixed decisions and contrast ### 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. ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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