Text

The blocks that carry words. Rich text has no alignment controls on purpose: layout comes from the section and the block, so an editor cannot bake a style into stored markup.

Icon list

An icon, a title and a line, four ways.

Rows

Full-width rows, icon on the left.

One setting

The layout is a picker on the block, not a new block.

Unset is the old look

Nothing already published moves when a variant ships.

Editor-facing

No developer needed to change how a block presents itself.

Same markup

The variants are CSS over one DOM, so they stay accessible.

Grid

Two, three or four across.

One setting

The layout is a picker on the block, not a new block.

Unset is the old look

Nothing already published moves when a variant ships.

Editor-facing

No developer needed to change how a block presents itself.

Same markup

The variants are CSS over one DOM, so they stay accessible.

Cards

Each item in its own panel.

One setting

The layout is a picker on the block, not a new block.

Unset is the old look

Nothing already published moves when a variant ships.

Editor-facing

No developer needed to change how a block presents itself.

Same markup

The variants are CSS over one DOM, so they stay accessible.

Steps

Numbered, for a sequence.

1

One setting

The layout is a picker on the block, not a new block.

2

Unset is the old look

Nothing already published moves when a variant ships.

3

Editor-facing

No developer needed to change how a block presents itself.

4

Same markup

The variants are CSS over one DOM, so they stay accessible.

Numbers

Figures that count up when they come into view.

Row

Centred across one line.

28

Blocks

9

Templates

16

Fonts

1

Stylesheet

Cards

Each figure in its own panel.

28

Blocks

9

Templates

16

Fonts

1

Stylesheet

Divided

Hairline rules between figures.

28

Blocks

9

Templates

16

Fonts

1

Stylesheet

Stacked

Figure over label, for a tall column.

28

Blocks

9

Templates

16

Fonts

1

Stylesheet

Quote

An attributed quotation.

Left bar

A coloured rule down the left.

Same Kit, same block library, same stylesheet. Nine sites that do not look like each other.

The templates instance , Nine sites, one Umbraco

Display

Set large, centred.

Same Kit, same block library, same stylesheet. Nine sites that do not look like each other.

The templates instance , Nine sites, one Umbraco

Card

On its own panel.

Same Kit, same block library, same stylesheet. Nine sites that do not look like each other.

The templates instance , Nine sites, one Umbraco

Quote marks

Oversized quotation marks.

Same Kit, same block library, same stylesheet. Nine sites that do not look like each other.

The templates instance , Nine sites, one Umbraco

Accordion

Collapsible panels. One layout, because one is enough.

Section edges

A section can cut its own top or bottom edge: angled, curved, torn, or an image mask.

Background overlay

A section with a photograph behind it can darken it, lighten it, or leave it alone.

Spacing and borders

Padding is a fluid scale, not a fixed length, so a band breathes the same on a phone and on a wide screen.