Blocks demo

Every block the site renders: a hero with title, subtitle, background loop and the film, then rich text, image and text, image, columns, a YouTube video, a Shopify collection and a map.

Watch the film

Rich text

Rich text supports bold, italic, links and lists:

Brew on site
Control recipes remotely
Track quality per batch

Order
Install
Brew

A quote stands out from the body text.

Tables

Beers per day	Litres	Monthly saving
100	25	€ 450
200	50	€ 900

A table wider than the column scrolls sideways:

Venue	Beers per day	Litres per day	Kegs saved per week	Monthly saving	Yearly saving
Café	100	25	6	€ 450	€ 5 400
Bar	200	50	12	€ 900	€ 10 800

Code

A long command wraps instead of widening the page:

npm run dev -- --host 0.0.0.0 --port 4321 --open /blocks-demo --verbose

Illustration of a brewer pouring a beer at a tap in front of two fermentation tanks

Image and text

The image sits on the left by default and stacks above the text on small screens.

The same brewer illustration, placed on the right

Image on the right

Editors pick the side per block. A wide table scrolls inside the text column:

Venue	Beers per day	Litres per day	Kegs saved per week	Monthly saving	Yearly saving
Café	100	25	6	€ 450	€ 5 400

Illustration of a busy brewpub with a Streetbrewers bar and brewing tanks behind it — An image block with a caption.

With an image

A column can carry an optional image, which then needs alt text.

Text only

Columns hold a heading and rich text.

Up to four

A block holds one to four columns.

Fourth

They wrap on narrow screens.

Street map of Gembloux with a marker on Avenue Maréchal Juin 6, south of the botanical garden — © OpenStreetMap contributors

Streetbrewers Av. Maréchal Juin 6, local 143.0.4 (ground floor at Smart Gastronomy Lab) 5030 Gembloux Belgium

Open in Maps