L-015Layout

Product Spec Bento

Product-centric annotated bento built as a plain, fully editable Etch tree: section > container > header (eyebrow, h2, intro, all plain) > a grid holding a plain product-media cell (a photo with four numbered hotspot mar…

Get this with ProIncluded in your plan

50 sites for €79 only, Compare all plans

Preview Desktop, 1280px

The system behind it

One pattern, your whole brand.

Product Spec Bento reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.

Type: Layout
Category: Bento grids
Responsive: Desktop to phone
Works with: Etch, ACSS, plain CSS

Options 2

Set on the section, in Etch’s attributes panel. No code needed.

data-leaders

onoff

hover leader-line drawn from a spec cell to its matching hotspot on the product photo (desktop pointer only

data-theme

lightdark

re-themes the whole section, inline JS draws an SVG leader line from the hovered/focused spec cell to its hotspot (stroke-dashoffset draw-in transition, no @keyframes) w…