Bento Grid

A bento section for Framer: a mosaic of deliberately unequal tiles, authored as a list rather than drawn by hand.

Each tile takes an eyebrow, a headline, a body line and an optional image, plus a size: small, wide, tall or large. Size is a span, so a large tile is two columns by two rows and a wide one is two by one, and the headline scales with it. The biggest tile reads as the argument rather than as a bigger box.

The grid places every tile explicitly and tracks where the holes are, so it can paint them in a colour of their own instead of letting the page show through. An odd number of tiles no longer leaves a gap that looks like a mistake.

Columns, gap, row height and the two breakpoint widths are controls. Below the tablet width the grid drops to two columns, and below the phone width to one, keeping each tile's span.

Light by default, because most sections like this are, and every colour is a control: background, tile fill, tile border, headline, body, accent, accent text and the painted gap. Corner radius and both fonts too.

After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it.

Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution: do not share the component URL, and do not publish the component or its code anywhere, paid or free. Full terms arrive with your purchase. Questions: me@majedesigns.dev