Insight block

One sentence that says what the numbers mean.

Beta · Content blocks · packages/css/src/components/insight-block.css

.pui-insight-block (plain) · --bar · --web · __statement __subtext (__texts in the bar). Max-width insight/max-width — the locked three quarters.

Insight block — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

Style plain (Statement title/medium in accent/text — yellow flips to ink — Subtext body/small text/subtle) / bar (a 12px accent/main pill, Statement headline/small, Subtext body/large, both text/default)
Statement and Subtext are text; Has subtext hides the second line
640 wide by default; FILL it in a rail up to the 1344 ceiling, never past it
Colour is the Accent mode on the instance; one insight, one accent — a row of insights is a Bullet list
Type binds the Typography roles: 32 / 28 / 32 for the plain statement, 40 / 32 / 40 for the bar’s
Web true, with Style bar — a block that opens a section of a web page under its Heading pair: Statement title/small at Semibold, Subtext body/medium on the relaxed line (1.5); the bar’s 40 over 22 are a slide’s. The width is the page’s (636–740 on the product pages) and the three-quarter cap still holds. In code --web beside --bar (request 38)

Use when a chart, a KPI row or a table needs its one-line conclusion; a slide states the point before the evidence; a case study’s headline result.

Do not use when there are several points (Bullet list, Icon list); it is a title (Heading pair); it is a warning or a status (Alert); it is the product’s live suggestion in a chat (a Card inside the AI’s Message).

Relates to KPI tile, Card, Bullet list, Icon list, Heading pair, Chart recipes.

Anti-patterns an insight the full width of the slide · two insights side by side · body weight for the statement · the accent as text on yellow without the flip · an insight with no number or claim in it.

Keywords: insight, takeaway, conclusion, callout, statement, key finding, so what

Figma — page Insight block: Insight block (3 variants)

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens insight-block.css.

<div class="pui-insight-block"><p class="pui-insight-block__statement">Supply-path optimisation cut costs 18 %.</p>
  <p class="pui-insight-block__subtext">MAFO · Q3 2026 · all publishers</p></div>
<div class="pui-insight-block pui-insight-block--bar"> …the same two texts… </div>

The modifiers

	What it is	Note
Style	(none) plain · --bar	—
Canvas	(none) the slide’s sizes · --web with --bar — a block that opens a section of a web page under its heading pair: Statement title/small at Semibold, Subtext body/medium on the relaxed line (request 38)	—
Accent	the Accent mode on the instance (data-accent); one insight, one accent	—

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
`#544d4d` on `#ffffff`	8.24	4.5	text.muted on surface.page (promised)	ok
`#2b25d9` on `#ffffff`	8.86	4.5	text.link on surface.page (promised)	ok
`#0b0202` on `#ffffff`	20.51	4.5	text.default on surface.page (promised)	ok

3 distinct pair(s) rendered, 0 that axe calls a violation.

The focus ring

Nothing in this component takes focus.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).