FAQ index, Pattern Paste Canonical: https://patternpaste.com/pattern/faq-index.html Library (https://patternpaste.com/patterns/) FAQ (https://patternpaste.com/patterns/faq/) Catalogue access Standard # FAQ index An editorial inquiry index structured as full-width ruled rows. An airy header band leads into five numbered ledger rows. Each row is a three-way horizontal distribution: a bold index numeral in the left rail, the question set prominent at reading scale in the centre, and the answer permanently open in the right column at a clean reading measure. States no colour and no font of its own. Start here ## What you change first - The questions and answers. Five direct pairs covering your core commercial or technical policies. - The count. Duplicate or remove any core/columns row along with its preceding separator. - The header. Adjust the section title and lede paragraph to match your page context. The signature moment ## The numeral anchors the question and the answer is always open The section discards the interactive accordion click in favour of an open editorial ledger. Each row is bound by full-width currentColor hairlines and structured into three synchronized columns: a prominent two-digit index numeral (01 through 05) at display scale in the left rail, the question set in the middle 38% column, and the answer packed in the right 50% column at a comfortable 32rem measure. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Spacing presets. ### Set by this pattern - The three-way column distribution. - Typographic hierarchy. - Reading measure. 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 numbered ledger FAQ structured as full-width ruled rows. An introductory header leads into five sequential inquiry rows. Each row distributes the entry across three columns: a bold display numeral on the left, the question set clearly at reading scale in the centre, and the complete answer open on the right at a bounded measure. ### The signature moment: the numeral anchors the question and the answer is always open The section discards the interactive accordion click in favour of an open editorial ledger. Each row is bound by full-width currentColor hairlines and structured into three synchronized columns: a prominent two-digit index numeral (01 through 05) at display scale in the left rail, the question set in the middle 38% column, and the answer packed in the right 50% column at a comfortable 32rem measure. The numeral anchors the row visually, allowing visitors to scan topics quickly without layout reflow or state toggles. Make it yoursVariations and the edits to make first ### The variations - Night index. Complete inversion of the base pattern: your theme's contrast ground with base type and hairlines following in currentColor. ### What you change first - The questions and answers. Five direct pairs covering your core commercial or technical policies. - The count. Duplicate or remove any core/columns row along with its preceding separator. - The header. Adjust the section title and lede paragraph to match your page context. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. Inherits default theme typography for all headings and copy. - Palette. Built strictly on base and contrast token fallback chains. - Spacing presets. Uses standard core spacing presets (spacing|80, spacing|60, spacing|50, spacing|40, spacing|30) for responsive padding and gaps. ### What it decides for itself - The three-way column distribution. 12% numeral rail, 38% question column, 50% answer column. - Typographic hierarchy. Display clamp for index numerals, large preset chain for questions, and medium preset chain for answers. - Reading measure. 32rem right-padding clamp on answer text. ### Contrast All text and numerals meet or exceed WCAG 2.1 AA standards (4.5:1 for body copy and 3:1 for large display numerals) across stock themes and inverted modes. Technical notesBlock mechanics, responsive behaviour and constraints ### Mechanics worth knowing - Three-column asymmetric ledger. Uses core/columns with 12%, 38%, and 50% basis splits. At desktop and tablet, the numeral, question, and answer align horizontally across the row. On mobile viewports below 782px, WordPress stacks the columns naturally into a coherent vertical sequence. - Hairlines in currentColor. The wide separators between rows use is-style-wide and inherit the active text ink, ensuring they adapt automatically across light and dark theme modes without custom CSS. - Bounded reading measure. The answer paragraph applies padding-right: max(0rem, 100% - 32rem), maintaining optimal line length on wide screens while releasing fully on smaller displays. 17KB of core-block markup, 6 blocks (column, columns, group, heading, paragraph, separator), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (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. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. 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 Pricing cover menu A screen-height cover with three plans set on it like a restaurant menu: a heavy veil of your theme's contrast colour over the photograph, a display headline in the lower left and a narrow ruled price list in the right-hand column, each plan a name and its price on one line and a sentence beneath, hairline rules between, one button under the list. The list drops beneath the headline on a phone. Includes a replaceable example photograph and placeholder prices. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it. (https://patternpaste.com/pattern/pricing-cover-menu.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 6.7 to 7.0. 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/) #### What's inside Blocks column, columns, group, heading, paragraph, separator Core only yes Chains 28, deepest 3 rungs currentColor no color base, black, contrast, role-label, white spacing 20, 30, 40, 50, 60, 80 font-size large, medium, xx-large Continue exploring ## Next in FAQ Explore all 13 FAQ patterns (https://patternpaste.com/patterns/faq/) Shot in Twenty Twenty-Five FAQ FAQ Standard ### FAQ dialogue An editorial interview-style FAQ. 6 blocks · 1 variation Open preview (https://patternpaste.com/pattern/faq-dialogue.html) Night dialogue (https://patternpaste.com/pattern/faq-dialogue.html#variant=night-dialogue) Shot in Twenty Twenty-Five FAQ FAQ Standard ### 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. 7 blocks Open preview (https://patternpaste.com/pattern/faq-lead-rail.html) Shot in Twenty Twenty-Five FAQ FAQ Free Standard ### FAQ ledger A display headline over three topic rows. 7 blocks · 1 variation Open preview (https://patternpaste.com/pattern/faq-ledger.html) Night ledger (https://patternpaste.com/pattern/faq-ledger.html#variant=night-ledger)