FeaturesBlocks

BlocksPieces of a page, ready to place.

A block is a reusable piece of a page: an opening, a pricing grid, a form, a footer. It carries its structure, its texts and its stylesheet, and reads the brand kit of the project it sits in. Some act: a cart, a booking, a table you can filter.

Updated on

On this page3 sections
What makes a blockThe libraryBlocks that act

What makes a block, rendered live.

A pricing card from the library, as a site shows it. Next to it, what it carries: its text slots, each with its type and maximum length, and the primitives it is made of.

Popular

Pro

For growing teams that ship fast.

$29/ month
  • Unlimited projects
  • Advanced analytics
  • Priority support
  • 50 GB storage
Get started
Pricing card

Its 10 texts

SlotTypeTextMax.
badgeNotePopular22
titleTitlePro12
descriptionBodyFor growing teams that ship fast.174
priceValuePrice$296
pricePeriodNote/ month17
feature1LabelUnlimited projects35
feature2LabelAdvanced analytics35
feature3LabelPriority support35
feature4Label50 GB storage35
ctaButtonGet started33

Its 19 nodes

Inline text6Container4List item4Badge1Heading1Paragraph1List1Link1
A block's texts in the Inspector: each with its key, one value per language.
The Inspector, on a block of a page

In the Workshop, clicking a block opens it in the Inspector: each of its texts with its key, one value per language. The Studio fills them with your words, you rework them here.

The library, aisle by aisle.

The 516 blocks of the Kubbler library, sorted as in the Workshop's Add panel. Each aisle shows a few, rendered under this site's brand with their demo copy: placed in a project, they take its brand kit and its words.

Heroes

69 blocks
The library block "Premises photo and brand panel", with its demo copy.
Premises photo and brand panel
The library block "Circled word, choice cards", with its demo copy.
Circled word, choice cards
The library block "Cinematic full-screen title", with its demo copy.
Cinematic full-screen title
The library block "Portraits in arches", with its demo copy.
Portraits in arches
The library block "Booking card", with its demo copy.
Booking card
The library block "Giant name", with its demo copy.
Giant name
The library block "Welcome and house venues", with its demo copy.
Welcome and house venues
The library block "One piece, name below", with its demo copy.
One piece, name below

Blocks

299 blocks
The library block "Agenda grid", with its demo copy.
Agenda grid
The library block "The work in acts", with its demo copy.
The work in acts
The library block "Alternating feature blocks with screen shot", with its demo copy.
Alternating feature blocks with screen shot
The library block "Blog article grid", with its demo copy.
Blog article grid
The library block "Large address on a colour band", with its demo copy.
Large address on a colour band
The library block "Arched photo gallery", with its demo copy.
Arched photo gallery
The library block "Activity area chart", with its demo copy.
Activity area chart
The library block "Rows beside a title", with its demo copy.
Rows beside a title

E-commerce

16 blocks
The library block "Bundle offer", with its demo copy.
Bundle offer
The library block "Minimal buy box", with its demo copy.
Minimal buy box
The library block "Apparel product card", with its demo copy.
Apparel product card
The library block "Product gallery", with its demo copy.
Product gallery
The library block "Customer review card", with its demo copy.
Customer review card
The library block "Order tracking steps", with its demo copy.
Order tracking steps

Marketing

12 blocks
The library block "Case study card", with its demo copy.
Case study card
The library block "Plan comparison, highlighted column", with its demo copy.
Plan comparison, highlighted column
The library block "Highlighted plan card", with its demo copy.
Highlighted plan card
The library block "Quote testimonial card", with its demo copy.
Quote testimonial card
The library block "Benchmark comparison bars", with its demo copy.
Benchmark comparison bars
The library block "Large stat counter", with its demo copy.
Large stat counter

Blog

14 blocks
The library block "Featured article card", with its demo copy.
Featured article card
The library block "Magazine article card", with its demo copy.
Magazine article card
The library block "Author bio card", with its demo copy.
Author bio card
The library block "Comment thread", with its demo copy.
Comment thread
The library block "Blog newsletter signup", with its demo copy.
Blog newsletter signup
The library block "Table of contents", with its demo copy.
Table of contents

Components

40 blocks
The library block "Category panel", with its demo copy.
Category panel
The library block "Metric card with sparkline", with its demo copy.
Metric card with sparkline
The library block "Two-offer comparison card", with its demo copy.
Two-offer comparison card
The library block "Three stat highlight", with its demo copy.
Three stat highlight
The library block "Contact form", with its demo copy.
Contact form
The library block "Alert banner", with its demo copy.
Alert banner

Dashboards

16 blocks
The library block "Notification panel entry", with its demo copy.
Notification panel entry
The library block "Settings section card", with its demo copy.
Settings section card
The library block "Empty table state", with its demo copy.
Empty table state
The library block "Activity log entry", with its demo copy.
Activity log entry
The library block "Data table row", with its demo copy.
Data table row
The library block "Structured filter bar", with its demo copy.
Structured filter bar

Navigation bars

30 blocks
The library block "Quiet navbar with a compact call", with its demo copy.
Quiet navbar with a compact call
The library block "Icon bar navbar", with its demo copy.
Icon bar navbar
The library block "Navbar on the brand colour", with its demo copy.
Navbar on the brand colour
The library block "Navbar in a dark capsule", with its demo copy.
Navbar in a dark capsule

Footers

18 blocks
The library block "Footer in a brand card", with its demo copy.
Footer in a brand card
The library block "Footer with a giant name", with its demo copy.
Footer with a giant name
The library block "Footer with a running line and the email", with its demo copy.
Footer with a running line and the email
The library block "Editorial footer with newsletter", with its demo copy.
Editorial footer with newsletter

Blocks that act, read in plain words.

A cart, a booking, a table you can filter: these blocks have a state, computations, validations and actions. All of it is written as data, read by an engine shared by every project, and reads back in the Workshop.

A block with a state

The order block of a pastry shop demo: the cart, the pick-up slot, the summary. Its shape, texts, state, computations, validations and actions live in a single file.

The order block of a pastry shop demo: the cart, the pick-up slot and the summary.

Read in plain words

In the Workshop, a block's behavior reads as sentences: what happens when you act on the page, what the block keeps, what it computes, what it checks. Or in its code, as you prefer.

A demo's booking block in the Workshop: the form on the left, and on the right what happens at each field and button, in plain words.

Wired to data

The Mechanisms show what the block calls: its actions, the server routes they reach, and the collections where orders land.

The order block inspected in the Mechanisms: its state, its actions, and the routes it calls down to the collections.