Library FAQ

Catalogue accessStandard

Open index

A FAQ with nothing to click: six numbered entries run down the band as a two-column ledger, the index number and the question on the left, the answer opposite at reading size on a bounded measure, and a wide hairline closing every row. A small tracked label opens the section and a question with its button closes it.

Every word is visible at once, which is what a short list, a page that has to read straight through and anything printed need. States no colour and no font of its own.

ThemePreview size
As authoredColour
Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What you change first

  1. The copy in the rows. Six questions and six answers, and both halves are read here, so an answer cannot be the place you hide the detail.
  2. The count. A row is a columns block followed by a separator.
  3. The numbers. They are typed, not generated.
  4. The button's destination. It ships with no href, which is what the editor writes before a link is chosen; point it at your contact page.
  5. The answer measure. 32rem.

The signature moment

An index, not an accordion with the arrows taken off

Every word is visible at once, and the composition is built so that reads as a decision rather than as a subtraction. A core/details row cannot lose its triangle: <summary> is not a block, the marker is the browser's, and CSS a block attribute cannot express has no business in a pattern. So the way to a FAQ without markers is a different composition, and this is it.

Theme handoff

What comes from where

From your theme

  • Typeface.
  • Palette.
  • The hairlines.
  • The button.
  • Spacing scale.

Set by this pattern

  • The 45/55 split.
  • The answer measure is bounded by the content, not the viewport.
  • The question is a ladder heading, the number is a paragraph.
  • The section label is an h2 at 14 to 15px.
  • Row rhythm.
  • Where it stacks.
  • The closing line is a row, not a footer.

Full pattern notes

Why it works, and how it is built

Open a topic for the complete design reasoning, editing guidance and implementation notes.

Design rationaleComposition, intent and nearest alternatives

Overview

A FAQ with nothing to click. Six numbered entries run down the band as a two-column ledger: the index number and the question on the left, the answer opposite it on the right, a wide hairline closing every row. A small tracked label opens the section and a question with its button closes it. There is no disclosure, no card, no box and no JavaScript of any kind.

The signature moment: an index, not an accordion with the arrows taken off

Every word is visible at once, and the composition is built so that reads as a decision rather than as a subtraction. A core/details row cannot lose its triangle: <summary> is not a block, the marker is the browser's, and CSS a block attribute cannot express has no business in a pattern. So the way to a FAQ without markers is a different composition, and this is it.

The number does the job the triangle was doing. Each row opens with a tracked 01 to 06 above its question, which says "there is a fixed, countable set of these" the moment the section comes into view, and says it without anything being interactive. The question then sits on the theme's large rung against an answer at reading size in the column beside it, so the two halves of every row are told apart by scale and position rather than by state. Nothing opens, nothing closes, and nothing is hidden from a visitor who is scanning, from a printer, or from find-in-page.

The rules close it. A wide core/separator runs above the first row and under every row after it, at full measure rather than per column, so the ledger reads across the seam and the two columns stay one table.

Why this is not faq-list, faq-ledger or faq-measure

  • faq-list is the accordion: a loud header column against six native disclosure rows, the ask outweighing the questions. This one has no header column and no disclosure, and it gives the answers the same standing as the questions.
  • faq-ledger hangs a repeated topic label in the margin and divides the band with rules of two lengths. Its left column is a grouping device; the left column here is the question itself.
  • faq-measure refuses the split entirely: one column at the full 1240 with questions at display size.

Take this one for a short list, for a page that has to read straight through, and for anything that gets printed.

Make it yoursVariations and the edits to make first

What you change first

  1. The copy in the rows. Six questions and six answers, and both halves are read here, so an answer cannot be the place you hide the detail. Four or five sentences is the ceiling before the row outgrows its question.
  2. The count. A row is a columns block followed by a separator. Copy the pair to add one, delete the pair to remove one, and keep the separator above the first row so the ledger opens on a rule.
  3. The numbers. They are typed, not generated. Renumber by hand after adding or deleting a row; nothing checks them for you.
  4. The button's destination. It ships with no href, which is what the editor writes before a link is chosen; point it at your contact page. If you would rather not have an action here, delete the closing row, but do not replace it with a link inside a sentence: an inline link takes its height from the font's em box, which a pattern stating no font cannot raise to a 44px target.
  5. The answer measure. 32rem. Raise it only if you also widen the right column, because the measure stops against the column edge and a measure wider than its column is no measure at all.
Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

  • Typeface. No font family is stated anywhere.
  • Palette. The ground is your base and the type 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. The label and the index numbers ask for the label role first and fall through to the same contrast everywhere else.
  • 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 both 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.
  • The button. It states no colour at all, so elements.button paints it in whatever your theme uses for a filled button. What it states is its padding, which is what makes it a 44px target.
  • Spacing scale. Section padding, the air above and below each row, the gutter between the two columns and the gap over the closing line are core spacing presets, so the rhythm resizes with your theme rather than against it.

What it decides for itself

  • The 45/55 split. Wide enough on the left for a question on the large rung to take two or three words a line, wide enough on the right for the answer to reach its measure without running past it.
  • The answer measure is bounded by the content, not the viewport. Each answer's padding-right: max(0rem, 100% - 32rem) resolves its percentage against the column's own width, so the answer is exactly 32rem wide wherever the column is wider than that and exactly full width wherever it is not. That is roughly 70 to 80 characters in the faces the stock themes ship. A vw expression in its place drifts with the theme's content width and cannot be tuned once.
  • The question is a ladder heading, the number is a paragraph. The question takes the large rung as a two-rung chain with a tuned clamp() behind it; the number is body text at 13 to 14px on 0.18em tracking at weight 600. A number wanting to be a label is a paragraph, never a heading with its type bent down.
  • The section label is an h2 at 14 to 15px. It is the only heading above the questions, so it carries the section in the outline while sitting at label size in the design. Hierarchy here comes from the numbers and the rules, not from making that line large.
  • Row rhythm. Every row states its own margins and carries its air on the columns block, so the separators butt against the rows and the section reads as one ruled ledger rather than six stacked items.
  • Where it stacks. Core stacks columns below 782px, so on a phone each row becomes a number, a question and then its answer, in that order, which is the reading order the ledger already had. The separators keep the rows apart, so nothing is lost when the seam goes.
  • The closing line is a row, not a footer. The last pair is a sentence on the left and the button on the right, set on the same 45/55 grid as the questions, so the invitation lands where the answers have been landing.

Contrast

Every pair in the section is your contrast on your base, which is the pair your theme already ships body copy on, so every piece of text clears 4.5:1 wherever your body copy does. Nothing here leans on the 3:1 allowance for large text, the questions included: their size comes from a preset rung, and a rung guarantees a size only in the theme that defines it. The button reverses the pair, and it is your theme's reversal rather than ours. The hairlines are structural marks in currentColor and carry no text.

Technical notesBlock mechanics, responsive behaviour and constraints

A note on the answer copy

The six answers are real answers, not filler, and several make claims about the product rather than about this section. The plugin answer in particular is written to be true under the three axes: the default promise is no plugin at all, a section that needs the companion plugin says so on its own page before you buy, and it stays legible with the plugin switched off. If you keep our copy rather than writing your own, keep it true of what you sell. The sixth answer is written to be replaced.

The markup

19KB of core-block markup, 8 blocks (button, buttons, column, columns, group, heading, paragraph, separator), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme.

Start free trial to copyWhat you copy is yours forever. Cancel whenever.

Back to the library