FAQ cards: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/faq-cards.html Core Patterns (https://patternpaste.com/patterns/) FAQ (https://patternpaste.com/patterns/faq/) Free Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What you change first - The copy. Six questions and six answers. - The count. A card is one core/group. - The order. Cards read down the first column and then down the second. - 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. - The label. Three words at most. 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. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - The borders. - Spacing scale. ### Set by this pattern - The density contrast - Proportion. - The 45/55 header split - The answer measure - Card padding 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 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. Make it yoursVariations and the edits to make first ### The variations Two, each 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. - Clay room. Declares "colour": "stated" and "type": "stated", and moves the composition as well as the palette: brown ink #432b22 on cream #f8f1e3, a display headline beside a short welcome, and six rounded sand #eee2cf cards whose answers close on the browser's own core/details. The first card is fired in terracotta #a94b2d with cream #fff8ed type and ships open; the right column starts a step lower than the left (a padding clamp that reaches zero on a phone), so the pair reads as set down by hand rather than ruled. The cards run down each column, one to three then four to six, which is also their order when they stack. Its display heading uses Georgia, 'Times New Roman', serif; the label and questions use Arial, Helvetica, sans-serif. Identical in every theme and matching none. ### What you change first - 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. - 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. - The order. Cards read down the first column and then down the second. Put the question people send most often top-left. - 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. - 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. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. The base and Night cards inherit your theme's face. Clay room states the Designed good to know's Georgia display and Arial label and questions. - 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. ### Contrast 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. Clay room is measured on the values it paints: ink on cream 11.6:1, ink on the sand cards 10.2:1 and cream on the terracotta card 5.3:1, so every piece of text clears 4.5:1, the terracotta answer included. Technical notesBlock mechanics, responsive behaviour and constraints ### Mechanics worth knowing - The grid is core/columns, not the grid layout. Two 50% columns with three card groups in each, because the columns block is measured and its stacking below 782px is WordPress's own. The grid layout type 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. Questions ## FAQ cards: common questions Does FAQ cards need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will FAQ cards match my theme? Choose by variation. Card grid, Night cards and Stepped cards take your theme’s palette; Clay room and Folio bring its own colours. How many variations does FAQ cards have? 5: Card grid, Clay room, Folio, Night cards and Stepped cards. Each is its own markup; choose one in the toolbar above the preview before you copy. Is FAQ cards free? Yes. It is one of 64 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription. Which WordPress version does it need? Requires a block theme on WordPress 7.0 to 7.1. 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Its Styled looks come with a subscription. Read the markup Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Pricing Donate impact tiers Four donation cards for a charity, each amount set at display size over what it pays for, one plain line of how, and a Donate button on the foot. The third card is inverted as the most given gift, and a note under the cards carries the charity number, Gift Aid and a link to give another amount. States no colour and no font of its own. (https://patternpaste.com/pattern/donate-impact-tiers.html)Tables Compare matrix A capability matrix in a core table: one row per capability, one column for each of the two plans people choose between, and a mark in every cell, with a third plan named in one line under the table instead of a fourth column that would ladder its row headers on a phone. The recommended column is announced by a two-pixel bracket that stands over it and hands off to the table's own hairlines, so nothing is filled and nothing is coloured. Three fixed columns hold roughly 117 pixels each at 390. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-matrix.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.html) #### Before you paste Requires a block theme on WordPress 7.0 to 7.1. 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section FAQ Access Free Plugin None, core blocks only Variations 5 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks column, columns, group, heading, paragraph Presets color 5, spacing 5, font-size 2 WordPress 7.0+ Continue exploring ## Next in FAQ Explore all 16 FAQ patterns (https://patternpaste.com/patterns/faq/) Shot in Twenty Twenty-Five FAQ No plugin needed ### FAQ bento An asymmetric bento layout pairing a large featured lead card on the left with four compact question tiles on the right. FAQ Preview pattern (https://patternpaste.com/pattern/faq-bento.html) Shot in Twenty Twenty-Five FAQ No plugin needed ### 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. FAQ Preview pattern (https://patternpaste.com/pattern/faq-cover-questions.html) Shot in Twenty Twenty-Five FAQ No plugin needed ### FAQ dialogue An editorial interview-style FAQ. FAQ Preview pattern (https://patternpaste.com/pattern/faq-dialogue.html)