# 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.

Canonical: https://patternpaste.com/pattern/faq-pillars.html
Section: FAQ
Access: Included in Pattern Paste access.
Needs: 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.
Blocks: column, columns, details, group, heading, paragraph, separator
Keywords: faq, questions, answers, pillars, columns, categories, topics, support

## Variations (2)

### Three pillars (the default)

Identical markup in every theme.

Three categorical domain pillars under top border rules, with compact disclosure rows in currentColor. Inherits your theme's base and contrast.

### Night pillars

Identical markup in every theme.

The three pillars inverted: contrast ground, base text, and all top rules and hairlines following in currentColor.


---

## 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.

## 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.

## The variations

- **Night pillars.** The colour inversion axis: contrast ground, base text, and all
  top rules and internal hairlines following in `currentColor`.

## 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.

## What you change first

1. **The pillar categories.** Edit the three category titles (e.g. Architecture, Compliance, Commercial) to fit your product or service lines.
2. **The questions.** Three disclosure questions per pillar. Keep question copy concise so summary lines remain uncluttered.
3. **The header.** Tailor the section title and intro paragraph to your documentation scope.

## Contrast

All summary headings and body copy pass WCAG 2.1 AA contrast requirements against their respective backgrounds in both base and night variations.