FAQ pillars, Pattern Paste Canonical: https://patternpaste.com/pattern/faq-pillars.html Library (https://patternpaste.com/patterns/) FAQ (https://patternpaste.com/patterns/faq/) Catalogue access Standard # FAQ pillars A three-column architectural layout organizing questions by topic into vertical pillars. A centred header leads into three balanced columns, each anchored by a top rule, an uppercase pillar label, a one-line orientation note, and three compact disclosure questions separated by hairlines. States no colour and no font of its own. Start here ## What you change first - The pillar categories. Edit the three category titles (e.g. - The questions. Three disclosure questions per pillar. - The header. Tailor the section title and intro paragraph to your documentation scope. The signature moment ## Three categorical pillars with top ruled accents and dense questions Rather than a single flat list or broad horizontal bands, this pattern partitions inquiries into three equal-width columnar zones. Each column is distinguished by a top-anchored rule in currentColor, followed by an uppercase tracked category marker and a large pillar heading. Beneath each pillar heading, three concise core/details questions provide compact on-demand reading without dominating the vertical scroll height of the page. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Spacing presets. ### Set by this pattern - The three-pillar structure. - Pillar hierarchy. 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 three-column architectural layout organizing questions by topic into vertical pillars. An introductory header band leads into three balanced domain columns (Architecture, Compliance, and Commercial). Each pillar is anchored by a 2px top border rule, an uppercase pillar label, a one-line orientation note, and three compact disclosure rows separated by hairlines. ### The signature moment: three categorical pillars with top ruled accents and dense questions Rather than a single flat list or broad horizontal bands, this pattern partitions inquiries into three equal-width columnar zones. Each column is distinguished by a top-anchored rule in currentColor, followed by an uppercase tracked category marker and a large pillar heading. Beneath each pillar heading, three concise core/details questions provide compact on-demand reading without dominating the vertical scroll height of the page. Make it yoursVariations and the edits to make first ### The variations - Night pillars. The colour inversion axis: contrast ground, base text, and all top rules and internal hairlines following in currentColor. ### What you change first - The pillar categories. Edit the three category titles (e.g. Architecture, Compliance, Commercial) to fit your product or service lines. - The questions. Three disclosure questions per pillar. Keep question copy concise so summary lines remain uncluttered. - The header. Tailor the section title and intro paragraph to your documentation scope. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. Heading and body font families from your theme. - Palette. base and contrast token fallback chains. - Spacing presets. Standard spacing tokens (spacing|80, spacing|70, spacing|50, spacing|40, spacing|30, spacing|20). ### What it decides for itself - The three-pillar structure. Equal 33.33% column distribution. - Pillar hierarchy. 2px top rule accent, tracked category eyebrow, large preset heading, and compact details rows. ### Contrast All summary headings and body copy pass WCAG 2.1 AA contrast requirements against their respective backgrounds in both base and night variations. Technical notesBlock mechanics, responsive behaviour and constraints ### Mechanics worth knowing - Three-column grid. Built with core/columns holding three 33.33% basis columns. Reflows responsively across desktop, tablet, and mobile views. - Top border anchor. The pillar header uses a group with border-top-width: 2px and border-top-color: currentColor. It stays sharp and visible across both light and inverted dark modes without hardcoded hex values. - Compact disclosures. Uses native core/details blocks with single-line summary questions and tight body typography, ensuring dense information density within each column track. 25KB of core-block markup, 7 blocks (column, columns, details, 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, details, group, heading, paragraph, separator Core only yes Chains 38, deepest 3 rungs currentColor yes color base, black, contrast, role-label, white spacing 20, 30, 40, 50, 70, 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 ### 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. 8 blocks Open preview (https://patternpaste.com/pattern/faq-open-index.html) Shot in Twenty Twenty-Five FAQ FAQ Standard ### FAQ plate An FAQ designed as an isolated focal plate. 9 blocks · 1 variation Open preview (https://patternpaste.com/pattern/faq-plate.html) Night plate (https://patternpaste.com/pattern/faq-plate.html#variant=night-plate) Shot in Twenty Twenty-Five FAQ FAQ Standard ### FAQ spotlight A FAQ with one question promoted to display size: a tracked eyebrow, the question everyone asks set at up to 64px across the full measure, and its answer always visible beneath at a bounded measure. 7 blocks Open preview (https://patternpaste.com/pattern/faq-spotlight.html)