Blocks

Basic blocks

Primary block

A block with a title and body text.

Block without padding (using block--body).

Block title

A block with a title and body text.

Primary block

A block with a title and body text.

Secondary block

Another block to demonstrate spacing.

Primary block

A block with a title and body text.

Secondary block

Another block to demonstrate spacing.

Tertiary block

A third block in the row.

Primary block

A block with a title and body text.

Secondary block

Another block to demonstrate spacing.

Tertiary block

A third block in the row.

Quaternary block

A fourth block for the layout demo.

Secondary block

Another block to demonstrate spacing.

Advanced blocks

Pipeline projection Ready

Overview Activity Settings

This block combines title slots and content in a single reusable structure.

Operators can be added without leaving the current context.

Main zone

Main content can grow naturally with standard spacing.

Aside zone

This side zone uses a light background to highlight complementary content.

Three-zone layout Draft

Left panel

Secondary navigation or metadata can live here.

Main content

Primary information stays centered for readability.

Right panel

Contextual actions and insights can be grouped on this side.

Fixed aside column

A narrow column sized on the --size scale, next to a body that absorbs the remaining width.

128 Projections

Primary block

A block with a title and body text.

Secondary block

Another block to demonstrate spacing.

Cards

Primary block

A block with a title and body text.

Secondary block

Another block to demonstrate spacing.

Tertiary block

A third block in the row.

A mark in the corner

`block--mark` lays a small icon in the top corner at the start of a block: what it is — the type of a card laid in a diagram, the kind of a document —, beside what it says, not a title.

Primary block

A block with a title and body text.

Primary block

A block with a title and body text.

Primary block

A block with a title and body text.

A block that is a link

The whole card is the link — for a choice made by picking one card among several: a plan, a branch, a template. It reads as text, not as a muted action; under the pointer its ground takes a nuance and its edge firms up, and the keyboard finds it by the focus ring every control wears.

Starter One person, the essentials, nothing to pay. Team A few people working on the same things. Company Every team, with the controls an organisation asks for.

Figures

A single oversized value or icon, centered. Used for dashboard counters and status tiles — add block--square to keep the tile square whatever its width.

128 Projections

99.9% Uptime

Live

Throughput

42 Events per second

Key figures

The figure read as a dashboard's key figure: `block--figure--start` lays it from the line's start, the label above, the value with its unit set back (`block--figure-unit`), and a line under it saying what it is made of (`block--figure-sub`). `block--tone-cat-<name>` draws the category's bar down the edge; an `a.block--link` opens the figure's view. In a `grid`, the row goes to several lines as the room narrows.

To relaunch 7 123 pieces · 4 groups

Load 92% 3 groups above 85 %

Woven this week 1,284m² 41 orders

Late orders 3 2 at risk next week

A block carrying a tone

The colour of a state — or of a category — as a bar down the leading edge, and nothing else: the same bar a message wears, without the tinted ground, so a list of them reads as a list and not as an alarm. Any block takes it, a bar standing on a block included.

block--tone-info — the ground stays the block's own, only the leading edge carries the colour.

block--tone-success — the ground stays the block's own, only the leading edge carries the colour.

block--tone-warning — the ground stays the block's own, only the leading edge carries the colour.

block--tone-error — the ground stays the block's own, only the leading edge carries the colour.

block--tone-cat-lavender — the ground stays the block's own, only the leading edge carries the colour.

Stacks

Horizontal

Equal columns, full width, wraps on overflow.

One

Two

Three

Four

Vertical

Stacked rows, full width, uniform gap.

One

Two

Three

Split

First child grows, last child stays fixed — used for lead + action rows.

Describe the action in this lead text.

Actions in a corner

`has-corner-actions` on a frame — a lead, a block, a code block, a message — and its icon actions in a `corner-actions` inside it: in the top corner at its end, shown while the frame is pointed at or holds the keyboard, always on a screen without a pointer (`corner-actions--always` to show them for good). A frame holding running text keeps a column free for them.

This lead can be copied with the button in its corner.

A block with two actions in its corner, out of the way until it is pointed at.

Nested

Horizontal stack containing vertical stacks — typical dashboard grid.

ONEONE

ONETWO

ONETHREE

TWOONE

TWOTWO

TWOTHREE

THREEONE

THREETWO

THREETHREE