# 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. Each entry hangs bold typographic 'Q.' and 'A.' 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.

Canonical: https://patternpaste.com/pattern/faq-dialogue.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, group, heading, paragraph, separator
Keywords: faq, questions, answers, dialogue, interview, editorial, support

## Variations (2)

### Dialogue (the default)

Identical markup in every theme.

An editorial two-column layout with hanging Q and A marks in the margin, every answer open on your theme's base ground.

### Night dialogue

Identical markup in every theme.

The editorial dialogue inverted: contrast ground, base text, and structural Q/A marks in role-label.


---

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

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

## The variations

- **Night dialogue.** The inversion axis: contrast ground, base text, and structural
  "Q." marks in `role-label` against the dark surface.

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

## What you change first

1. **The dialogue questions.** Four substantive questions addressing core product decisions.
2. **The guide rail copy.** Customise the left-column intro and engineering contact text.
3. **The count.** Duplicate or remove any inquiry row and its surrounding separator.

## Contrast

All text elements, structural glyphs, and headings meet or exceed WCAG 2.1 AA contrast requirements across all theme targets.