FAQ bento, Pattern Paste Canonical: https://patternpaste.com/pattern/faq-bento.html Library (https://patternpaste.com/patterns/) FAQ (https://patternpaste.com/patterns/faq/) Catalogue access Standard # FAQ bento An asymmetric bento layout pairing a large featured lead card on the left with four compact question tiles on the right. The featured card holds the core question with an expanded answer, key feature takeaways and an action link; the right column packs four bordered cards answering quick practical concerns. States no colour and no font of its own. Start here ## What you change first - The featured question. Replace the left card with your product's most critical value question. - The secondary tiles. Four concise answers to standard operational questions. - The header. Tailor the section title and intro paragraph to your page context. The signature moment ## Asymmetry across a featured bento card and compact question tiles The section organizes inquiries into an asymmetric visual hierarchy. Rather than treating every question identically, it gives prominence to the #1 primary workflow question inside a large 52% basis card on the left with expanded explanations and bullet takeaways. The right 48% column balances this weight with four compact, individually bordered question cards. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Spacing presets. - Corner styles. ### Set by this pattern - The asymmetric bento distribution. - Card hierarchy. - 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 An asymmetric bento layout pairing a large featured lead card on the left with four compact question tiles on the right. The featured card holds the core question with an expanded answer, key feature takeaways and an action link; the right column packs four bordered cards answering quick practical concerns. ### The signature moment: asymmetry across a featured bento card and compact question tiles The section organizes inquiries into an asymmetric visual hierarchy. Rather than treating every question identically, it gives prominence to the #1 primary workflow question inside a large 52% basis card on the left with expanded explanations and bullet takeaways. The right 48% column balances this weight with four compact, individually bordered question cards. This provides instant contrast between comprehensive onboarding guidance and quick practical clarifications. Make it yoursVariations and the edits to make first ### The variations - Night bento. Complete inversion: contrast ground, base text, and all card borders following in currentColor. ### What you change first - The featured question. Replace the left card with your product's most critical value question. - The secondary tiles. Four concise answers to standard operational questions. - The header. Tailor the section title and intro paragraph to your page context. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. Heading and body font families from your theme. - Palette. Built strictly on base and contrast token fallback chains. - Spacing presets. Standard spacing tokens for gutters and margins. - Corner styles. Supports global corner radius via theme controls (finish.corners). ### What it decides for itself - The asymmetric bento distribution. 52% featured card beside 48% compact card stack. - Card hierarchy. Large featured card with bullet list beside 4 compact question tiles. - Card padding. Responsive clamps tailored for dense card reading. ### Contrast All headings, text, and structural card borders pass WCAG 2.1 AA requirements across standard and inverted themes. Technical notesBlock mechanics, responsive behaviour and constraints ### Mechanics worth knowing - Asymmetric two-column split. Uses core/columns with 52% and 48% basis widths. On desktop, the featured card and the 4-card stack balance naturally; on mobile viewports below 782px, the cards stack cleanly in logical reading order. - Card borders in currentColor. All card containers use border-width: 1px and border-color: currentColor, ensuring crisp separation across themes without stated palette dependencies. - Responsive card padding. Internal padding uses responsive clamp values so boxes maintain visual balance across tablet and desktop scales. 14KB of core-block markup, 6 blocks (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 copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (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. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. 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 Pricing cover menu A screen-height cover with three plans set on it like a restaurant menu: a heavy veil of your theme's contrast colour over the photograph, a display headline in the lower left and a narrow ruled price list in the right-hand column, each plan a name and its price on one line and a sentence beneath, hairline rules between, one button under the list. The list drops beneath the headline on a phone. Includes a replaceable example photograph and placeholder prices. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it. (https://patternpaste.com/pattern/pricing-cover-menu.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 6.7 to 7.0. 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/) #### What's inside Blocks column, columns, group, heading, paragraph, separator Core only yes Chains 20, deepest 3 rungs currentColor yes color base, black, contrast, role-label, white spacing 20, 30, 40, 50, 60, 80 font-size large, medium, xx-large Continue exploring ## Next in FAQ Explore all 13 FAQ patterns (https://patternpaste.com/patterns/faq/) Shot in Twenty Twenty-Five FAQ FAQ Standard ### 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. 7 blocks Open preview (https://patternpaste.com/pattern/faq-spotlight.html) Shot in Twenty Twenty-Five FAQ FAQ 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. 5 blocks · 1 variation Open preview (https://patternpaste.com/pattern/faq-cards.html) Night cards (https://patternpaste.com/pattern/faq-cards.html#variant=night-cards) Shot in Twenty Twenty-Five FAQ FAQ Cover Standard ### 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. 5 blocks · 1 variation Open preview (https://patternpaste.com/pattern/faq-cover-questions.html) Paper veil (https://patternpaste.com/pattern/faq-cover-questions.html#variant=paper-veil)