FAQ measure: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/faq-measure.html Core Patterns (https://patternpaste.com/patterns/) FAQ (https://patternpaste.com/patterns/faq/) Catalogue access Standard # FAQ measure A single column of seven native disclosure rows running the full 1240 measure, ruled between and above and below. The question is set at display size across the whole width; the answer steps in from the left and holds a short reading measure, so the section's left edge alternates between the band edge and the indent. No second column and no label rail: the width is the design. ## All patterns Search patterns Loading patterns… Start here ## What you change first - The copy. Seven questions and seven answers. - The number of rows. A row is a separator followed by a details block. - 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 run closed. - The indent. The two numbers in clamp(0rem, 12vw - 3rem, 10rem) set how far the answers step in and how early the step disappears. - 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. The signature moment ## The step 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. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - The rules. - Spacing scale. ### Set by this pattern - The step - The 36rem measure - Proportion. - 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 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. ### The signature moment: the step 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. Make it yoursVariations and the edits to make first ### The variations - 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. ### What you change first - 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. - 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. - 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 run closed. - 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. - 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. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - 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. ### What it decides for itself - 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. ### Contrast 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. Technical notesBlock mechanics, responsive behaviour and constraints ### Why this is the only single-column FAQ 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. ### 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 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. Questions ## FAQ measure: common questions Does FAQ measure need a plugin? No. It is built only from core WordPress blocks (details, group, heading, paragraph and separator), so it pastes into the block editor with nothing to install. Will FAQ measure match my theme? Choose by variation. Full measure, Open measure and Numbered terms take your theme’s palette; Clear terms brings its own colours. How many variations does FAQ measure have? 4: Full measure, Clear terms, Open measure and Numbered terms. Each is its own markup; choose one in the toolbar above the preview before you copy. Is FAQ measure free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 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. 14KB of core-block markup, 5 blocks (details, group, heading, paragraph, separator), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### 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 Subscription Plugin None, core blocks only Variations 4 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks details, group, heading, paragraph, separator Presets color 5, spacing 4, 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 ### 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 ### Open book A reading-room FAQ with every answer already open: a small tracked label, a centred display title and a short introduction stand over a two-column grid of four questions, each hung from a hairline with a topic label, the question at heading size, the answer at reading size and a quiet ruled aside beneath it. FAQ Preview pattern (https://patternpaste.com/pattern/faq-open-book.html) Shot in Twenty Twenty-Five FAQ No plugin needed ### Open index A FAQ with nothing to click: six numbered entries run down the band as a two-column ledger, the index number and the question on the left, the answer opposite at reading size on a bounded measure, and a wide hairline closing every row. FAQ Preview pattern (https://patternpaste.com/pattern/faq-open-index.html)