FAQ cover questions

A screen-height, full-bleed core/cover that carries a whole FAQ: a heavy veil of your theme's contrast colour over the photograph, a display headline in the lower left, and five numbered questions in a ruled column at the lower right, each a core/details that opens in place.

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.

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

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.

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.

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

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

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.

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.

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 for the source and license. Pasting an image URL does not import a Media Library attachment.