FAQ ledger: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/faq-ledger.html Core Patterns (https://patternpaste.com/patterns/) FAQ (https://patternpaste.com/patterns/faq/) Free Standard # FAQ ledger A display headline over three topic rows. Each row hangs a small tracked label in a narrow left column against three native disclosure questions stacked as a ruled list in the wide right column; a hairline runs the full width of the band between topics while the question rules stop at the list column, so the section reads as a ledger with margin notes. ## All patterns Search patterns Loading patterns… Start here ## What you change first - The copy. One headline, three labels, nine questions and nine answers. - The number of questions in a topic. Inside the list column, a question is a details block and the rule above it is a separator. - The number of topics. A topic is a columns block followed by a long separator. - Which question 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 ledger closed. - The headline. If your page already has one, delete the heading block and the ledger starts on its first long rule, which still reads as intended. The signature moment ## The rule that runs past the column Two kinds of hairline, and they stop in two different places. The rules between the questions live inside the list column and stop at its edges. The rules between the topics are separate blocks at the band level and run the whole constrained width, under the label column as well as the list. So the eye reads a grid that nobody drew: long rules divide the ledger into topics, short rules divide each topic into entries, and the labels hang in the margin the long rules leave open. Remove the long rules and the labels float; make the short rules long and the labels are boxed in with the questions and stop reading as annotations. The difference in length is the composition. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - The hairlines. - Spacing scale. ### Set by this pattern - The two rule lengths - The 26/74 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 topic-grouped FAQ. A display headline runs the full constrained width; under it, three topic rows. Each row is a narrow left column holding one small, tracked, uppercase topic label that hangs at the top of the row like a margin note, and a wide right column holding three native core/details questions stacked as a ruled list. 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 rule that runs past the column Two kinds of hairline, and they stop in two different places. The rules between the questions live inside the list column and stop at its edges. The rules between the topics are separate blocks at the band level and run the whole constrained width, under the label column as well as the list. So the eye reads a grid that nobody drew: long rules divide the ledger into topics, short rules divide each topic into entries, and the labels hang in the margin the long rules leave open. Remove the long rules and the labels float; make the short rules long and the labels are boxed in with the questions and stop reading as annotations. The difference in length is the composition. The second half of the idea is the scale collision inside each row. The label is 13 to 14px, uppercase, 0.16em tracked; the first question beside it is 21 to 30px, tight-tracked, and the two share the same 45px line band so they sit on one line across the gutter. Nothing between those two sizes appears in the row, and that gap is what makes a row with one typeface and two colours look designed. ### Why this is not the FAQ list faq-list has one list and one header column beside it, and the header column is the loud half: a display headline, a lead line and a button, with the questions beside it set at reading size in a dense ruled list. faq-ledger has no header column and no action. Its header is a display headline across the top, the questions are the large type, and what sits beside them is the structure of the list itself: topics, each with its own hanging label, divided by rules of two lengths. Take faq-list for one short list with a call to action; take faq-ledger when the questions fall into groups and the grouping is worth showing. 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 ledger. The colour axis, using the only move the contract can promise everywhere: the section inverts to your contrast with your base on it, and every hairline follows the type because the separators carry no colour of their own. Composition, sizes and copy are identical to the base. Both slugs exist in every stock block theme, which a tint would not. ### What you change first - The copy. One headline, three labels, nine questions and nine answers. Keep a question under about 28 characters so it holds ONE line at 390px. The 45px line box that makes each closed row a tap target applies per line, so a question that wraps on a phone opens a 45px gap inside itself; measured 2026-08-21 on the first draft's 36-character opener. Keep labels to two or three words so they hold one line at 26%. - The number of questions in a topic. Inside the list column, a question is a details block and the rule above it is a separator. Copy the pair to add one, delete the pair to remove one; the first question in a topic has no rule above it because the long rule does that job. - The number of topics. A topic is a columns block followed by a long separator. Copy or delete that pair. Keep the closing separator so the ledger ends on a rule. - Which question 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 ledger closed. - The headline. If your page already has one, delete the heading block and the ledger starts on its first long rule, which still reads as intended. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. No font family is stated anywhere, in the base or the variation. - Palette. 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. No accent slug appears in any rung. - 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, 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 question, the gutter between label and list, and the space under the headline are all core spacing presets, so the rhythm resizes with your theme rather than against it. ### What it decides for itself - The two rule lengths, which is the design and the one thing to leave alone. - The 26/74 split. Narrow enough that the label reads as a margin note, wide enough that a three-word label sits on one line in a serif and a sans. - Proportion. The headline at clamp(2.125rem, 4.4vw, 3.75rem) with -0.03em tracking on a 1.05 line height; the questions at clamp(1.3125rem, 2.1vw, 1.875rem) with -0.02em tracking in a 45px band; the labels at 13 to 14px with 0.16em tracking; the answers at 16 to 17px on a 1.7 line height. - The answer measure, at 32rem, releasing to full width the moment the column is narrower than that. - Row rhythm. Every question sets its own margins to zero and carries its air as padding, the band's block gap is zero, and the separators are zeroed too, so the rules butt against the rows and the section reads as one ruled ledger rather than a stack of separate items. ### Contrast Every pair in the base and in Night ledger is your contrast on your base, or the reverse, which is the pair your theme already ships body copy on. The headline and the questions are large text (21px and above at every width) and are claimed at 3:1; the labels and the answers are body text and are held to 4.5:1. The hairlines are structural marks in currentColor and carry no text. Measured per host theme by check:contrast against the resolved values, not the authored chains. 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 two rule lengths come from where the separator sits, not from a width. A separator inside the list column can be no wider than the column; a separator that is a direct child of the constrained band is as wide as the band's content size. Both are the same is-style-wide block with margins zeroed. Move a long rule into a column and it becomes a short one; nothing else needs changing. - The band's block gap is zero, on purpose. The group states blockGap: 0 so the long rules butt directly against the topic rows above and below them instead of floating in a 24px gap on each side. Every piece of air in the ledger is carried as padding on the rows and margin on the headline and the labels, where it is stated explicitly, rather than as a layout gap that the theme sizes. - The label and the first question share a 45px line band.

is not a block, so no attribute can pad it and its height is its line box. The question

carries line-height: max(45px, 1.15em) so every single-line question is a 45px band, which clears the 44px touch target and gives the list its even rhythm. The label carries the same max(45px, 1.15em) and the same top margin as the question's top padding, so at desktop width the label's line box and the first question's line box are the same height at the same y, and the two read as one line across the gutter without any alignment property being available to state. - 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 32rem wide wherever the column is wider than that and full width wherever it is not. In the 74% column of a 1240px band that is roughly 70 to 80 characters. - The label stacks above its questions on a phone. Core stacks columns below 782px, so at 390 each topic reads label, then its three questions, then the long rule, then the next label. The columns' vertical gap is the small preset so the label stays attached to its list rather than floating between two rules. - The first question 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. - Typography cascades down the row. Size, weight, tracking and line height are set once on the

and the question inherits them; the answer paragraph resets all four to its own values. - The labels are h3 headings under an h2 headline, so a screen reader gets the topic structure the rules draw for a sighted visitor. Questions ## FAQ ledger: common questions Does FAQ ledger 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 ledger 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. How many variations does FAQ ledger have? 2: Ledger and Night ledger. Each is its own markup; choose one in the toolbar above the preview before you copy. Is FAQ ledger free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Read the markup #### 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 Free Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks column, columns, details, group, heading, paragraph, separator Presets color 5, spacing 6, 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 ### Lead question, rest on a rail One question answered in full with the other eight on a rail beside it: a tracked eyebrow, a question set at up to 56px and an answer that is always open hold a 55% column, and eight small disclosure rows run down a single ruled 45% column on the right, starting on a rule so the rail reads as a table from its first line. FAQ Preview pattern (https://patternpaste.com/pattern/faq-lead-rail.html) Shot in Twenty Twenty-Five FAQ No plugin needed ### 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. FAQ Preview pattern (https://patternpaste.com/pattern/faq-list.html) Shot in Twenty Twenty-Five FAQ No plugin needed ### FAQ measure A single column of seven native disclosure rows running the full 1240 measure, ruled between and above and below. FAQ Preview pattern (https://patternpaste.com/pattern/faq-measure.html)