FAQ measure

One column of seven native core/details rows running the full 1240 measure, ruled above the first, between every pair and below the last. The question sits at display size across the whole width. The answer steps in from the left and holds a short reading measure inside it. There is no second column, no label rail and no card: the width, and what is done with it, is the design.

Every other FAQ in the library divides the band vertically and then fills the halves. This one refuses the division and makes the section's left edge do the work instead. A question begins at the band's left edge and runs as far as it needs to; its answer begins one indent further in and stops well short of the right. So the left edge alternates, question, indent, question, indent, all the way down, while the rules stay full width and hold the whole thing square.

That is the density collapse as well as the composition. Nothing sits between a 38px question and a 17px answer, and the indent is what tells the eye which of the two it is looking at before it has read a word. Take the indent away and the section is a long list of headings; take the short measure away and the answers run 110 characters and nobody finishes one.

• Open measure. Every row ships open. One idea moves and it is the composition: with all seven answers visible the step repeats down the whole section and the page reads as a document, which is what a support page wants and what a sales page does not. Colours, sizes, indent and copy are identical to the base.
• Clear terms. Declares "colour": "stated" and "type": "stated", and keeps the step, with a numeral holding it: ink #20251e on warm paper #f2f1ea, a display headline beside a lime #d8f76b note, and five rows in which a large index numeral sits in a fixed column and the question and its answer both start one column in. Each row is a flex group of the numeral and the core/details; the details takes a fixed 100% basis so it never claims its answer's full width and squeezes the numeral column (a fixed column still shrinks beside a greedy neighbour). The rules are stated in #9fa396 and the closing link is an underlined 44px transparent button. The display, note heading, numerals and questions use Arial, Helvetica, sans-serif. Identical in every theme and matching none.

1. The copy. Seven questions and seven answers. Keep a question under about 28 characters so it holds one line at 390px, and keep an answer to two or three sentences; at 70 characters a line, four sentences is a paragraph nobody opens twice.
2. The number of rows. A row is a separator followed by a details block. Copy or delete the pair. Keep the closing separator so the run ends on a rule.
3. Which question starts open. Move "showContent":true and the matching open on the <details> tag to whichever question you most want read, or delete both and ship the run closed.
4. The indent. The two numbers in clamp(0rem, 12vw - 3rem, 10rem) set how far the answers step in and how early the step disappears. Set it to 0rem and you have a plain full-width FAQ, which is a different and quieter section.
5. The header. If your page already has a title, delete the header group and the section starts on its first rule, which still reads as intended.

• Typeface. The base and Open measure inherit your theme's face. Clear terms states the Designed working agreement's Arial stack on its display, note heading, numerals and questions.
• 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. No accent slug appears in any rung.
• The rules. 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. The band's padding, the air inside each row and the gap under the header are core spacing presets.

• The step, which is the design and the one thing to leave alone.
• The 36rem measure on the answers, and the indent that scales with the viewport and closes on a phone.
• Proportion. Questions at clamp(1.3125rem, 2.6vw, 2.375rem) with -0.02em tracking in a 45px line band; answers at 16 to 17px on a 1.7 line height; the header's eyebrow at 14 to 15px with 0.24em tracking above a headline at clamp(2rem, 4vw, 3.25rem).
• Row rhythm. Every row zeroes its own margins and carries its air as padding, and the separators are zeroed too, so the rules butt against the rows and the run reads as one ruled document rather than a stack of items.

Every pair is your contrast on your base, in the base and in Open measure alike, 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 eyebrow and the answers are body text and are held to 4.5:1. The rules are structural marks with no colour of their own and carry no text. Measured per theme against the resolved values, not the authored chains. Clear terms paints ink on paper at 13.8:1 and ink on the lime note at 13.0:1; its rules carry no text.

faq-ledger hangs topic labels in a margin against a list. faq-list puts the ask in a header column against a compact list. faq-cards is a wall of bordered boxes with nothing collapsed. faq-spotlight promotes one question to display size and packs the remaining eight into a grid. All four divide the band. faq-measure is the answer to a different question, which is what to do when there is nothing to put beside the questions and the page is a support page rather than a sales page. Take it when the FAQ is the whole page.

• 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 indent is padding, not margin. core/paragraph supports only top and bottom margins, so a margin-left would be an attribute the block's own save() never writes and the buyer's editor would mark the block invalid the first time it is opened. The step is padding-left instead, which is fully supported and lands on the same pixels.
• The indent closes itself on a phone. It is clamp(0rem, 12vw - 3rem, 10rem), so it is 120px on a wide desktop, about 50px at 820, and exactly zero below roughly 480px, where an indent would be stealing a seventh of the measure from an answer that has none to spare.
• The measure is bounded by the row, not by the viewport. The answer's padding-right: max(0rem, 100% - 36rem) resolves its percentage against the row's own width, so the answer is 36rem wide wherever the row is wider than that and full width wherever it is not. With the indent taken off as well, a 1240px band gives about 68 characters and an 820px one about 77. It was 46rem until the measure was rendered and counted: the indent shrinks faster than the band does, so the widest measure is at 820 and not at 1280, and the answers ran to 100 characters there while reading fine on the desktop they were authored on.
• A question must hold ONE line at 390. The line-height: max(45px, 1.15em) that makes a closed row a 44px tap target applies per line, so a question that wraps on a phone opens a 45px gap inside itself with nothing to flag it. The questions floor at 21px, which puts the budget at about 28 characters; the longest here is 27. Fix a long question by shortening the question, never by loosening the line box.
• The rules are core/separator blocks carrying is-style-wide. Without that class Twenty Twenty-Four narrows a separator to a centred 100px stub, which is a full-width rule that silently is not one.
• The header holds its own measure with a nested constrained group, not with a padding-right on a direct child of the band. The padding trick puts the block's left edge in the wrong place inside a constrained layout, and because the width still comes out right, nothing flags it.
• The first question ships open (showContent: true). A section whose every row is shut shows a visitor nothing about what is inside it, and shows you nothing in a preview either.
• The disclosure marker is the browser's. It cannot be restyled from block attributes, and CSS that no block attribute can express lives in the companion plugin rather than in a pattern, so the triangle stays.