Block demo

Hero · gradient, centred, glow pattern

A gradient hero

This is sample content for the block demo. Swap it for your own text in the editor.

PrimaryOutline

Hero · light, left aligned, dots, highlights

A light hero with ticked highlights

This is sample content for the block demo. Swap it for your own text in the editor.

PrimarySecondary
  • First point
  • Second point
  • Third point

Hero · split with image

Text beside a photo

This is sample content for the block demo. Swap it for your own text in the editor.

Primary

Hero · background photo

A photo behind the text

This is sample content for the block demo. Swap it for your own text in the editor.

Primary

Hero · split, image bleeding to the edge

Image runs off the page

This is sample content for the block demo. Swap it for your own text in the editor.

Primary

Terminal hero · large

~ $ whoami

A developer-style hero
with a gradient second line.

This is sample content for the block demo. Swap it for your own text in the editor.

Primaryghost

~ $ echo "compact"

Terminal hero · compact, centred

Good for inner pages or a closing call to action.

Banner · info: a slim notice strip.

Learn more

Banner · success

Banner · warning

Banner · brand, dismissible

Action