FAQ dialogue, Pattern Paste Canonical: https://patternpaste.com/pattern/faq-dialogue.html Library (https://patternpaste.com/patterns/) FAQ (https://patternpaste.com/patterns/faq/) Catalogue access Standard # FAQ dialogue An editorial interview-style FAQ. A two-column layout places a contextual guide rail on the left beside a sequence of open dialogue entries on the right. ' marks in a narrow sub-rail beside the question and answer, establishing an authoritative editorial cadence where every answer is read straight through without clicking. States no colour and no font of its own. Start here ## What you change first - The dialogue questions. Four substantive questions addressing core product decisions. - The guide rail copy. Customise the left-column intro and engineering contact text. - The count. Duplicate or remove any inquiry row and its surrounding separator. The signature moment ## The structural Q and A marks in the margin The pattern models an editorial interview transcript. Each inquiry is presented as a two-column row with a 10% hanging rail carrying a bold typographic "Q." in role-label, followed by the question set at large reading scale and the substantive answer directly below it. Full-width currentColor hairlines mark the transition between questions. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Spacing presets. ### Set by this pattern - Asymmetric two-column ratio. - Hanging glyph alignment. - 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 An editorial interview-style FAQ. A two-column layout places a contextual guide rail on the left beside a sequence of open dialogue entries on the right. Each entry hangs bold typographic "Q." marks in a narrow sub-rail beside the question and answer, establishing an authoritative editorial cadence where every answer is read straight through without clicking. ### The signature moment: the structural Q and A marks in the margin The pattern models an editorial interview transcript. Each inquiry is presented as a two-column row with a 10% hanging rail carrying a bold typographic "Q." in role-label, followed by the question set at large reading scale and the substantive answer directly below it. Full-width currentColor hairlines mark the transition between questions. This layout discards accordion toggles in favor of immediate, frictionless reading ideal for long-form whitepapers, technical documentation, or founder dialogues. Make it yoursVariations and the edits to make first ### The variations - Night dialogue. The inversion axis: contrast ground, base text, and structural "Q." marks in role-label against the dark surface. ### What you change first - The dialogue questions. Four substantive questions addressing core product decisions. - The guide rail copy. Customise the left-column intro and engineering contact text. - The count. Duplicate or remove any inquiry row and its surrounding separator. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. Inherits theme font families for editorial headings and body text. - Palette. Built strictly on base and contrast token fallback chains. - Spacing presets. Standard spacing tokens for vertical gutters and padding. ### What it decides for itself - Asymmetric two-column ratio. 36% editorial guide rail and 64% inquiry stream. - Hanging glyph alignment. 10% sub-rail for the structural "Q." mark. - Reading measure. 32rem right-padding boundary on answer copy. ### Contrast All text elements, structural glyphs, and headings meet or exceed WCAG 2.1 AA contrast requirements across all theme targets. Technical notesBlock mechanics, responsive behaviour and constraints ### Mechanics worth knowing - Two-tier column architecture. Outer core/columns splits the sticky editorial rail (36%) from the dialogue flow (64%). Within each inquiry row, nested columns split the hanging "Q." glyph (10%) from the question and answer body (90%). - Continuous reading flow. All four questions and answers are open by default, allowing smooth document scanning and browser search (Cmd+F) access. - Hairlines in currentColor. Dividing rules inherit active text ink, adapting cleanly across light and dark theme surfaces. 15KB 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 24, 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 Cover Standard ### FAQ cover questions A screen-height FAQ on a photograph: a heavy veil of your theme's contrast colour, a display headline in the lower left and five numbered questions in a ruled column at the lower right, each one opening in place to its answer. 5 blocks · 1 variation Open preview (https://patternpaste.com/pattern/faq-cover-questions.html) Paper veil (https://patternpaste.com/pattern/faq-cover-questions.html#variant=paper-veil) Shot in Twenty Twenty-Five FAQ FAQ Standard ### FAQ index An editorial inquiry index structured as full-width ruled rows. 6 blocks · 1 variation Open preview (https://patternpaste.com/pattern/faq-index.html) Night index (https://patternpaste.com/pattern/faq-index.html#variant=night-index) 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)