Skip to content
Get lifetime access
Library

Bento tile

A tile for a bento grid: title, text, optional image or icon, and a span setting (1×1, 2×1, 1×2, 2×2). The grid packs tiles densely at four columns and stacks them on small screens. Hover lifts the tile and drifts the image.

ComponentFeatures

Live preview

Variant
Scheme
Width
Motion

  • Projects

    Larger pieces of work, planned and priced in writing first.

  • Consultations

    A first conversation and a written plan.

  • Regular care

    Weekly, on a fixed monthly price.

  • Checkups

    A scheduled check, every season.

  • Small fixes

    The small fixes, done on the same visit.

  • Urgent help

    Same-day help when something cannot wait.

  • Projects

    Larger pieces of work, planned and priced in writing first.

  • Consultations

    A first conversation and a written plan.

  • Regular care

    Weekly, on a fixed monthly price.

  • Checkups

    A scheduled check, every season.

etchpress.com/library/bento-tile
Bento tile

What you can build with it

A features grid where one or two features deserve more room. A services overview mixing photos, icons and short text. A product summary block on a home page.

Props

title (text); text (text); image (image, optional); span (select: 1×1, 2×1, 1×2, 2×2); tone (select: light, dark, primary)

States shown

Rest, hover, focus within. Reduced motion: no drift.

How to change it

Content and options are 7 props in the component's settings panel. Colour, type, spacing and radius follow your Automatic.css settings, so a change to the site's palette or scale changes this too. For anything else, edit the classes in the Style Manager, starting with .bento, .bento-tile, .null.

ACSS tokens used

–card-padding, –radius, –primary-dark, –box-shadow-1/2.

ACSS requirements

ACSS 4 defaults. Pure CSS; no stylesheet needed.

Version history

Version 1.1.0, September 30, 2026: Family contract: the inset, gaps and corner read the shared card variables (–card-padding, –card-gap-tight, –card-radius); the grid sets the size, so no size prop. Version 1.0.1, September 29, 2026: Tiles with a photo keep their dark scrim and light text in the dark colour scheme. Version 1.0.0, September 19, 2026: First release.

Tested with

Etch 1.6.7 and ACSS 4.0.1. Version 1.1.0.

Lifetime members

Members copy this straight into Etch, ready to paste.

Used an earlier version? How to update it

Get lifetime access
Back to the library
Other builders

Want EtchPress for Bricks or the block editor?

Everything here is made for Etch. Pick the builder you use and leave your email: we write once, when EtchPress works there.

This field is required.