# 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. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/faq-ledger.html Section: FAQ Access: Free, and free to keep. 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, topics, accordion, support, ledger ## Variations (2) ### Ledger (the default) Identical markup in every theme. Three topics, three questions each, on your base with your contrast. The topic rules run the whole band and the question rules stop at the list, so the labels hang in the margin like a ledger. The first question ships open. ### Night ledger Identical markup in every theme. The same ledger inverted: your contrast as the ground, your base as the type, every hairline following the type in currentColor. Both slugs exist in every block theme, so the inversion arrives everywhere. --- ## 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. ## 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. ## 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 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. ## What you change first 1. **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%. 2. **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. 3. **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. 4. **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. 5. **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. ## 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.