FAQ plate, Pattern Paste

Start here

What you change first

The questions. Five disclosure rows addressing primary client uncertainties.
The support action. Link the "Talk to our team" button to your contact page or chat widget.
The intro copy. Tailor the heading and subhead to your product context.

The signature moment

The whole inquiry framed inside a single elevated plate

Rather than letting the questions bleed to the band's edges, the entire inquiry lives inside a self-contained bordered plate. The top of the card pairs the section heading with a secondary support prompt and action button, establishing a dedicated service hub. Below the divider, five native core/details rows expand smoothly within the card container.

Theme handoff

What comes from where

From your theme

Typeface.
Palette.
Corner styles.

Set by this pattern

The contained plate enclosure.
Split header layout.
Reading measure.

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 FAQ designed as an isolated focal plate. A clean group container with a subtle 1px currentColor border and generous inner clamp padding houses a top header row with a support contact action, followed by five enclosed disclosure rows with internal dividing hairlines.

The signature moment: the whole inquiry framed inside a single elevated plate

This contained card format allows the FAQ to be dropped cleanly onto varied background surfaces or between complex visual sections without losing cohesion.

Make it yoursVariations and the edits to make first

The variations

Night plate. The entire section inverts: contrast background with base type, and the 1px card border following in currentColor.

What you change first

The questions. Five disclosure rows addressing primary client uncertainties.
The support action. Link the "Talk to our team" button to your contact page or chat widget.
The intro copy. Tailor the heading and subhead to your product context.

Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

Typeface. Inherits font styles from the active theme.
Palette. Built on standard base and contrast token fallback chains.
Corner styles. Supports global corner radius via theme controls (finish.corners).

What it decides for itself

The contained plate enclosure. 1px border and custom clamp padding.
Split header layout. 62% heading column and 38% contact action column.
Reading measure. 34rem right-padding boundary on answer paragraphs.

Contrast

All text and border elements meet or exceed WCAG 2.1 AA requirements across standard and inverted themes.

Technical notesBlock mechanics, responsive behaviour and constraints

Mechanics worth knowing

Self-contained plate. Uses an inner core/group with border-width: 1px and border-color: currentColor. Horizontal and vertical padding are responsive clamps, preserving internal proportions across all viewports.
Split header row. The card header divides the section title and intro from a direct support action using core/columns with 62% and 38% widths.
Button typography. The button inherits the theme's button elements and states no hardcoded radii or colors.

The markup

13KB of core-block markup, 9 blocks (button, buttons, column, columns, details, 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.