Statement block

Overview

The statement block is the compact unit of a “why pick this product” row. One icon, one headline, one short line. It earns its space when the page is selling — Capital, partnerships, a new product launch — and the user is grazing rather than reading top to bottom.

Row of three

The default layout. Equal columns, generous whitespace, the icons line up across the row. On mobile, the columns stack — the rhythm reads top-to-bottom instead of left-to-right.

Four across

Trim the headlines and the body when going to four. Each block gets less reading time per scan, so the title needs to carry more meaning on its own.

Variants

Two alignments. Default is center — the landing-page shape. Reach for start when the row is dense, or when the surrounding content is left-aligned and you want the blocks to read as a vertical list of features rather than a horizontal display.

In context

Pinned under a Founders display headline, the row of three reads as the page’s core proposition. Use as="li" when the blocks are wrapped in a real list — semantics matter, and the parent should be a <ul>.

Anatomy

Three named parts, separated by 24 px gaps. The icon optional; the title and body do the work.

• 01Icon (optional). 32 × 32 slot in the foreground colour. Pass an <Icon>, an SVG, or any node — the component sizes its container, but keeps your icon’s style.
• 02Title. Inter Tight SemiBold 20 / 24, foreground charcoal. Renders as an <h4> — statement blocks live below an <h2> section heading, which means the heading hierarchy lines up naturally.
• 03Body (optional). Inter Tight Regular 16 / 24 at 60% foreground. One short sentence. Tabular-nums and lining figures are on so any numerals (percentages, currencies) stay aligned with the page’s metric type.

Accessibility

• Icon is decorative. The icon slot is hidden from assistive tech (aria-hidden="true") — the title carries the meaning. Don’t pair a glyph with a title that depends on the icon to make sense.
• Heading hierarchy. The title renders as <h4>. Pair with an outer <h2> section heading; don’t skip levels (no statement block directly under an <h1>).
• List semantics when the row is a list. When the blocks are a parallel set of items, wrap them in a <ul> and pass as="li" to each block. Screen readers will announce “list, 3 items” and let the user scan.

Code

import { StatementBlock } from "@flatpay-dk/ui";

// Row of three on a landing page
<ul className="grid gap-10 sm:grid-cols-3 sm:gap-6">
  <StatementBlock as="li" icon={<BoltIcon />} title="Fast approval, no paperwork">
    Skip the endless forms and waiting times.
  </StatementBlock>
  <StatementBlock as="li" icon={<CardIcon />} title="Tied to your card sales">
    Repayment is a small percentage of every transaction.
  </StatementBlock>
  <StatementBlock as="li" icon={<CycleIcon />} title="Repay as you earn">
    Slower week? You repay less. Busy week? You clear it faster.
  </StatementBlock>
</ul>

// One block, left-aligned, no icon
<StatementBlock align="start" title="Repay as you earn">
  Slower week? You repay less. Busy week? You clear it faster.
</StatementBlock>

Best practices

• Title carries the meaning.A scanner reads the title and decides whether to read the body. Make every word in the title count — no “features”, “benefits”, “why us”.
• Parallel structure across siblings. Three titles that all start with verbs read as a unit. One starting with a noun breaks the rhythm. Same goes for body copy length — keep them within ±20% of each other.
• Use icons sparingly. Either every block in the row has one or none of them do — a row with two icons and one without reads as a missing asset, not a design choice.
• Don’t turn it into a card.No border, no background, no shadow on a statement block. The Figma is air and type — keep it that way. If the surface needs a container, that’s the parent section’s job, not the block’s.

Props

Related