About this block

Node Bento Grid walks through a product from the first upload to the finished report in six tiles. A heading row opens it, a two line heading on the left and a muted text link on its last line at the right, and below it the tiles sit in a bento: two down each side, and a tall tile over a short one in the middle.

Each tile carries a small product moment for its copy, over a title and a two line blurb: four sources wired into an upload that makes a new record, a team gathered around the person editing, a live panel of today's runs, a rule that fires two actions when an invoice runs late, a cleaning run with its counts, and a file and a folder either side of the pen that writes the summary. Nodes, chips and panels are plain markup on the Surface, badge, ghost and primary pairs, so they follow light, dark and any theme you install.

When to use

Use it to give an overview of a whole workflow, such as a data, reporting or operations product, where six steps need equal weight and a full screenshot of each would be too busy. Each illustration shows just enough of the interface for its title to land.

A natural flow around it on a Modern SaaS page:

Before

• A hero section to state the promise

After

• Feature Sections that show one step in the real product
• Pricing Sections once the reader has seen the whole flow

What you can customize

• Tiles. Edit the tiles array: a title, a blurb, the illustration, its art area and where the tile sits in the grid from lg. Keep the blurbs to the same length so the tiles read evenly.
• Illustrations. Each one is a small piece of markup drawn at design coordinates with the at helper. Swap the lucide icons on the nodes, the avatars in team, the rows in cleaned or the bars in runBars.
• Layout. From lg the grid is three columns with fixed row heights. Below it the tiles fall into two columns and then one, and each illustration stays centered in its tile at full size.

Tip: give each illustration one primary element, such as the new record, the person editing or the pen, so the eye lands in the same place in every tile.