[Library] FAQ

Catalogue accessStandard

FAQ cards

An FAQ as a wall of bordered cards: a tracked label and a one-line lede share the header row, then six questions sit in a two-column grid, each card a 1px currentColor box with the question set large and tight at the top and the answer packed beneath it at a short measure. Nothing is collapsed, so every answer is read without a click. States no colour and no font of its own.

Variation View
Before you copy Corners As authored
Open in a new window

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

A two-column grid of question cards under a short header row. The header puts a small tracked label on the left and one line of orientation in the right-hand 55%; beneath it, six questions sit in bordered boxes, three to a column, with every answer visible. No disclosure, no accordion, no plugin: the section is core groups, columns, headings and paragraphs, and it carries no JavaScript of any kind.

The signature moment

Density contrast inside a box, six times over

Each card holds two densities. The question is airy: 22 to 28px, tight negative tracking, a 1.1 line height, and nothing above or beside it. The answer under it is packed: body size at 15 to 16px on a 1.55 line height, held to a 30rem measure so it sits as a dense block tucked under the question's left edge with air to its right. Airy over packed, inside a 1px rule, is the card. Repeating it across a bordered grid is what makes the section read as a wall of considered boxes rather than a list of questions, which is the difference between this pattern and faq-list, where the question owns a whole ruled row and the answer opens on demand.

The header row is the same idea at section scale. The label is reduced to a 14px tracked mark on the left; the lede runs at 17 to 18px in the wider right column, so the first thing across the top of the section is already wide against narrow, and the grid below picks that rhythm up.

What it deliberately does not do: there are no index numerals and no figures at display size. Those are feature-grid's and stat-row's signatures, and a question set large enough to carry a card does not need a number in front of it.

What it inherits from your theme

  • Typeface. No font family is stated anywhere, in either file.
  • Palette. The ground and every piece of text are your base and 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 in any rung, because an accent's brightness is unknowable and every surface here carries text.
  • The borders. currentColor, so they are whatever your text is, in a light style and a dark one.
  • Spacing scale. The section's outer padding, the gap under the header row, and the gutters between and inside the columns are core spacing presets, so the rhythm resizes with your theme rather than against it.

What it decides for itself

  • The density contrast, which is the design. An airy question over a packed answer is what to leave alone; set the question at body size and the card becomes a paragraph with a border round it.
  • Proportion. The question ramp clamp(1.375rem, 2vw, 1.75rem) with -0.025em tracking and a 1.1 line height; the answer at 15 to 16px on 1.55; the lede at 17 to 18px on 1.5; 0.16em tracking on the label.
  • The 45/55 header split and the two equal grid columns.
  • The answer measure, at 30rem: roughly 60 to 70 characters in the faces these themes ship, and it releases to the full card the moment the card is narrower than that.
  • Card padding, as a clamp so the boxes keep their proportion across themes.

What you change first

  1. The copy. Six questions and six answers. Keep a question to eight words or fewer: at this size a longer one wraps to three lines and the card's top stops reading as one gesture. Keep answers to two or three sentences; the packed block is the idea, and a fourth sentence turns it into a column.
  2. The count. A card is one core/group. Delete one for five; to add one, copy a card that already carries margin-top and paste it at the foot of a column. Keep the columns within one card of each other, or the shorter column leaves a hole at the bottom of the grid at desktop width.
  3. The order. Cards read down the first column and then down the second. Put the question people send most often top-left.
  4. The lede. One sentence of orientation, and it should stay one line at desktop width; if it wraps to two, cut it before you shrink it.
  5. The label. Three words at most. If your page needs a real headline here, raise the label's size, and then raise the question scale to keep the contrast inside the cards, or the pattern loses its point.
Mechanics worth knowing477 words
  • The grid is core/columns, not the grid layout. Two 50% columns with three card groups in each, because the columns block is measured at the 6.6 floor and its stacking below 782px is WordPress's own. A grid layout type has not been tested against a 6.6 WordPress for this catalogue, so it is not used.
  • The vertical gap inside a column is an inline margin on the card. A column is a flow container and a card is a core/group; the second and third card in each column carry margin-top as a spacing attribute, set to the same core preset as the grid's gutter, so the gap between cards is the gap between columns. Inline beats the theme's block-gap rule, which is the point: the theme's default gap is tuned for paragraphs, not for boxes.
  • Stacking is free. Below 782px the two columns become one, the columns block's own row gap separates the last card of the first column from the first card of the second at the same preset, and the six cards read as a single run with even gutters. Nothing has to be restated for a phone.
  • The border is currentColor. It cannot blank, it needs no chain, and it follows the text colour wherever the theme puts it, which is why the night variation does not have to touch it.
  • The answer measure is bounded by the card, not the viewport. The answer's padding-right: max(0rem, 100% - 30rem) resolves its percentage against the card's own content box, so the answer is exactly 30rem wide wherever the card is wider than that and exactly full width wherever it is not. It releases to the full card at tablet width and on a phone without a breakpoint, and it would have to be re-tuned for nothing if the column count changed.
  • Each card has its own layout. The card group carries layout: constrained, matching the pricing cards, so its children are centred and capped by the theme's content size; at this column width the cap is wider than the card and nothing is narrowed, but a card wider than a theme's content size would be, and that is the inherited behaviour rather than a defect.
  • Headings carry their own colour chain. The question is an h3 with an explicit contrast chain, because a theme's heading element style beats an inherited group colour, and that is how a headline ends up the same colour as its band.
  • The padding on the cards is a clamp(), not a preset. The spacing presets are safe bare, but a theme's 50 can be 1.5rem or 3rem, and a card whose padding doubles between themes changes shape as well as size. The clamp keeps the boxes the same proportion everywhere and leaves the section's outer padding and gutters to the theme's scale.
The variations80 words

One, and it is a complete file you copy instead of the base.

  • Night cards. The colour axis, using the only move the contract can promise everywhere: the section inverts to your contrast with your base on it, every heading and paragraph restates the base chain, and the card borders follow the type because they are currentColor. Composition, proportion and copy are identical to the base. Both slugs exist in every stock block theme, which a tint would not.
Contrast68 words

Every pair in the base and in Night cards is your contrast on your base, or the reverse, which is the pair your theme already ships body copy on. The questions are large text at 22px and above and clear 3:1 comfortably; the answers, the lede and the label are body text and are held to 4.5:1. The borders are structural marks in currentColor and carry no text.

Back to the library

Continue exploring

Next in FAQ

Explore all 5 FAQ patterns