# 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. The questions drop beneath the headline on a phone. Includes a replaceable example photograph. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it.

Canonical: https://patternpaste.com/pattern/faq-cover-questions.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: cover, details, group, heading, paragraph
Keywords: faq, questions, accordion, details, cover, photo

## Variations (2)

### Ink veil (the default)

Identical markup in every theme.

An 80% veil of your contrast over the photograph with your base as the type: the headline low on the left, five numbered questions ruled on the right, the first one open.

### Paper veil

Identical markup in every theme.

The same cover inverted: the veil is your base at 80% and every word, rule and disclosure mark your contrast, the photograph a pale ghost behind ink. For a page that stays light.


---

## The signature moment: the questions are on the cover

An FAQ is usually a list further down the page. Here the questions ARE the
cover: five short numbered rows between hairline rules, sitting on the
photograph opposite a headline four times their size. The headline is the
weight; the ruled column is the detail; both rest on the same floor line, so
opening an answer grows the column upwards into the photograph rather than
pushing the page down. The scale collision and the rules hold in greyscale.

## Type on the photograph

Type sits on the image only because the veil makes the ground known: `contrast`
at `dimRatio` 80 under `base` type, the pairing the checker composites over a
white and a black photograph. The answers are body size, so they need the full
4.5:1, not the 3:1 allowed to large display type. Lower the veil below 80 and
that stops being true.

Each `core/details` states its text colour as a chain (`base` on the ink veil,
`contrast` on the paper one), so the summary's disclosure triangle, which is
drawn in `currentColor`, is always the colour of the question beside it.

## Type and hierarchy

- The headline is display: a bare `clamp(3rem, 7.5vw, 9.5rem)`, off the
  theme's ladder, because its size is the composition; at 1920 it is 144px and
  holds the lower left. Its measure is `clamp(18rem, 40vw, 38rem)`, so it
  breaks into a block and always leaves the column room beside it.
- The questions are the second mass on the cover: summaries in a bare
  `clamp(1.25rem, 1.5vw, 1.75rem)`, weight 600, off the ladder because the
  stock `large` rung stays near caption size at 1920; the numbers match them.
  Answers are body copy on `medium`; the two top labels have their own
  `clamp()` floored at 15px.
- Hierarchy comes from size and the rules alone: nothing is set in capitals.
- The headline states its size and colour chain and nothing else.

## Layout

- The cover's inner stack is a vertical flex column with `space-between` and a
  minimum height of `clamp(36rem, 50vw, 58rem)` (never `vh`): the labels at the
  top, a bottom-aligned wrapping row at the foot.
- The question column's measure is
  `max(clamp(22rem, 36vw, 36rem), calc((600px - 100vw) * 100))`: below a 600px
  screen the second term takes over and the column drops beneath the headline
  at full width. The 36rem cap is what keeps both regions on one row inside the
  1320px content width.
- Each row is a number and a `core/details` in a flex row; the number states
  the summary's line-height so the two share a baseline. Rules are
  `currentColor`, so they are always the colour of the type.
- Every gap is a spacing preset.

## What it inherits, what it decides

Inherits: every colour (veil `contrast`, type and rules `base`), the typeface,
the spacing scale. Decides: the veil's opacity, the type ramp, the two
measures, the cover's minimum height. The cover states its own text colour
chain so core's `:where()` rule that paints cover text `#fff` never applies.
The headline is `h2`: an FAQ is rarely the page's opener.

## What a buyer changes first

The photograph: choose Replace on the cover. Then the questions. Keep each
under about 28 characters: a wrapping summary opens a 45px gap inside itself.
The first question ships open; select any Details block and toggle "Open by
default" to change which. Add or remove a question by duplicating or deleting
its row; the last one carries the closing rule.

## Variations

- **Paper veil**: the veil is `base` at 80% and every word, rule and disclosure
  mark `contrast`, the photograph a pale ghost behind ink.

## The hand-off row

A short row on your theme's paper under the cover, a label and one paragraph at
a 34rem measure, so the cover reads as a section and shows where it ends.

## Included images

The copied markup includes a WordPress Photo Directory example photograph. The
public image URL keeps the example visible after pasting. Select the cover and
choose **Replace** to use your own Media Library file. See
[image credits](/image-credits/) for the source and license. Pasting an image
URL does not import a Media Library attachment.
