[Library] FAQ

Catalogue accessStandard

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. A hairline then drops to a compact two-column grid of eight small disclosure rows, four a side, ruled between and stacking to one column on a phone. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

A FAQ built around one question. A small tracked eyebrow, "The one everyone asks", sits over a single question set at display size across the full measure, with its answer always visible beneath it at a bounded measure. A hairline then drops to a compact two-column grid of the other eight questions as native core/details rows, four a side, small, medium-weight and ruled between. No cards, no boxes and no accordion plugin: opening and closing is the browser's own behaviour and the section carries no JavaScript of any kind.

The signature moment

Scale collision

One enormous question against a tight grid of small ones, with nothing in between. The featured question runs from 34px on a phone to 64px on a desktop, tracked in to -0.035em on a 1.02 line height, so it reads as a block of type rather than a line of it. The eight rows beneath it are held to 16 to 18px. There is no intermediate size anywhere in the section: no headline above the eyebrow, no subhead over the grid, no lede. The jump from the one question to the other eight is the whole design, and it is what tells a visitor which question the business expects them to have before they have read a word.

The second half of the idea is density. The featured answer is the only one shown in full and it is given air: a 38rem measure, 17 to 19px, a 1.55 line height, and the largest gap in the section below it. The grid is packed by comparison, two columns of 45px rows with the least air the spacing scale offers. Airy above, dense below, one hairline between.

What it inherits from your theme

  • Typeface. No font family is stated anywhere, in either file. The display question, the rows and the answers all take whatever your theme sets, serif or sans. The ramp was checked in both.
  • Palette. The ground is your base and every piece of text is your contrast, each written as a fallback chain ending on a colour WordPress itself guarantees, so the section paints in a theme with a full palette and still paints in a theme with none. No accent slug appears anywhere, in any rung: an accent's brightness is unknowable, and this section is nothing but text on a ground.
  • The hairlines. They are core/separator blocks with no colour of their own, so they take your theme's separator style: a 1px currentColor rule in Twenty Twenty-Four and Twenty Twenty-Five, and a 2px currentColor rule in a theme that styles nothing. They cannot blank, because a colour is never named.
  • Spacing scale. Section padding, the air inside each row, the gutter between the two columns and the gap above the dividing rule are all core spacing presets, so the rhythm resizes with your theme rather than against it.

What it decides for itself

  • The collision. One question at display size, eight at 16 to 18px, and nothing at any size between. This is the design and the one thing to leave alone.
  • Proportion. The display ramp clamp(2.125rem, 5vw, 4rem) at -0.035em on a 1.02 line height; the eyebrow at 13 to 14px with 0.18em tracking; the rows at clamp(1rem, 1.2vw, 1.125rem), weight 500, in a 45px band; the featured answer at 17 to 19px on 1.55 and the row answers at 15 to 16px on 1.6.
  • The measures. 38rem for the featured answer, roughly 65 to 75 characters in the faces the stock themes ship; 32rem for the row answers. Both release to full width the moment their container is narrower.
  • The grid. Two equal columns, four rows each, full-bleed ground with a 1240px constrained inner. The split variation moves to 55/45 for the same reason faq-list is 38/62: a bounded measure needs a column edge to stop against, or it reads as a shortfall.
  • Row rhythm. Every row sets its margins to zero and carries its air as padding, so the hairlines butt directly against the rows and each column reads as one ruled table rather than a stack of separate items.

What you change first

  1. The featured question. It is the section. Keep it to one sentence and under about sixty-five characters: at 64px across 1240px that is two lines, and on a phone it is four. If yours is short, the heading will sit on one line and the collision gets louder, which is fine.
  2. The featured answer. Three or four sentences. It is the only answer a visitor is guaranteed to read, so put the thing they most need to know in the first one.
  3. The eight rows. Keep questions to five or six words so they sit on one line inside a 45px band at tablet width; a question that wraps becomes a 90px band and the grid loses its evenness. A row is a details block followed by a separator: copy the pair to add one, delete the pair to remove one, and keep the columns balanced at the same count.
  4. Which row starts open. Move "showContent":true and the matching open on the <details> tag to whichever row you most want read, or delete both and ship the grid closed. The featured answer is open regardless.
  5. The gap above the grid. It is the dividing separator's margin-top, the largest gap in the section by design. Step it down one preset if the section sits between two others that already carry their own air.
Why this is not the FAQ list129 words

faq-list inverts scale between a label and a list: every question is set larger than the section label beside it, and the list is the composition. Here the list is deliberately the quiet part. Eight questions are demoted to a compact grid so that one question can be promoted to display size, and the section has a single focal point instead of a ruled column of equals. The test is what happens if you delete the big question: faq-list loses nothing it cannot spare, and this pattern loses its reason to exist.

It is also not the numeral family. feature-grid, stat-row and error-404 all put a number at display size; this section sets a sentence there, and there is no index, no figure and no numeral anywhere in it.

Mechanics worth knowing538 words
  • core/details is core, and it is safe at the 6.6 floor. The block landed in WordPress 6.3, and its block.json and save() output are identical in 6.5.5 and 6.7.1, which brackets the 6.6.7 matrix entry. The name attribute that powers exclusive accordions arrived later and is not used here.
  • The featured answer is a paragraph, not a details block. It is always visible by construction: there is nothing to open, nothing to remember to ship open, and nothing a visitor has to discover. In the grid, the first row ships open (showContent: true) so the grid shows what a row holds.
  • Both measures are bounded by their content, not the viewport. The featured answer's padding-right: max(0rem, 100% - 38rem) resolves against the paragraph's own width, so it is exactly 38rem wide wherever the band is wider than that and full width wherever it is not. The grid answers use the same device at 32rem. Neither needed re-tuning between the base and the split variation, which is the point of deriving a measure from the thing it measures.
  • Every grid question is a 45px band, on purpose. <summary> is not a block, so no attribute can put padding on it; its height is its line box and nothing else. At 16px an ordinary 1.2 line height gives a 19px row, which is under half of a usable touch target. line-height: max(45px, 1.15em) on the <details> makes every single-line question a 45px band, which clears the 44px target and gives the grid its even rhythm at the same time.
  • The two columns share one rule. The full-width hairline under the featured answer is the top rule of both columns, and each column ends on a rule of its own. The columns block carries a vertical block gap of zero, so when core stacks it below 782px the left column's closing rule becomes the right column's opening one and the list reads as a single ruled stack with no doubled line and no gap.
  • The gap above the grid is the rule's, not the layout's. Inside a constrained group every child normally gets the theme's block gap above it. The separator states margin-top from the spacing scale and the columns block states margin-top: 0, and an inline margin beats the layout stylesheet, so the rule sits tight against the first row of the grid and the air sits above the rule.
  • The disclosure marker is the browser's, not ours. It cannot be restyled from block attributes, and CSS a block attribute cannot express lives in the companion plugin rather than in a pattern, so the triangle stays. It is the only affordance telling a visitor a row can be opened.
  • Typography cascades down each row. Size, weight, tracking and line height are set once on the <details> and the question inherits them; the answer paragraph resets all four. Change the row scale in one place per row.
  • The display heading states its own colour. A theme's heading element style beats a colour inherited from the wrapping group, which is how a headline ends up the same colour as its band. The h2 carries the same contrast chain as the band's text, explicitly.
The variations179 words

Each is a complete file you copy instead of the base, and each changes the composition rather than a dial.

  • Spotlight (the base). Stacked: eyebrow, question, answer, rule, then the grid of eight in two columns. The question runs the full 1240px measure and the section reads top to bottom.
  • Split. Side by side: the featured question and its answer hold a 55% left column, and the eight rows run down a single ruled 45% column on the right, starting on a rule so the column reads as a table from its first line. The question's ceiling drops from 64px to 56px to suit the narrower column, and its floor and tracking are unchanged. Below 782px core stacks the two columns, so a phone sees the featured question first and the list beneath it, which is the same reading order as the base. Take it when the section has to sit shorter on the page, or when the big question should stay in view while the list is read. Colour is inherited, exactly as in the base.
Contrast66 words

Every pair is your contrast on your base, which is the pair your theme already ships body copy on. The featured question is large text at 34px and above and clears 3:1 at any ratio the body pair passes; the row questions, the eyebrow and every answer are body text and are held to 4.5:1. The hairlines are structural marks in currentColor and carry no text.

Back to the library

Continue exploring

Next in FAQ

Explore all 5 FAQ patterns