# 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.

Canonical: https://patternpaste.com/pattern/faq-bento.html
Section: FAQ
Access: Included in Pattern Paste access.
Needs: 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.
Blocks: column, columns, group, heading, paragraph, separator
Keywords: faq, questions, answers, bento, grid, cards, asymmetric, featured

## Variations (2)

### Bento grid (the default)

Identical markup in every theme.

A dominant featured card on the left paired with four compact bordered question tiles on the right, all in 1px currentColor on your base ground.

### Night bento

Identical markup in every theme.

The bento grid inverted: contrast ground, base text, and all card borders following in currentColor.


---

## 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.

## 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.

## The variations

- **Night bento.** Complete inversion: contrast ground, base text, and all card
  borders following in `currentColor`.

## 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.

## What you change first

1. **The featured question.** Replace the left card with your product's most critical value question.
2. **The secondary tiles.** Four concise answers to standard operational questions.
3. **The header.** Tailor the section title and intro paragraph to your page context.

## Contrast

All headings, text, and structural card borders pass WCAG 2.1 AA requirements across standard and inverted themes.