L-015Layout

Product Spec Bento

Product-centric annotated bento built as a plain, fully editable Bricks 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

All photos and visual assets used in this preview are sourced from Unsplash.

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: Bricks, ACSS, plain CSS

Options 2

Set on the section, in Bricks’ 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…