Skip to content
L-018Layout

Scroll Assembly Bento

Exploded-view product bento built as a plain, fully editable Etch tree: section > container > heading block (eyebrow with a crosshair mark, h2 with a muted second clause, intro, spec-sheet link) > an "Assembly Stage" wra…

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.

Scroll Assembly 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 5

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

data-theme
paperlightdark

data-accent
primarysecondaryaccentneutral

accent tiles, part pips, meter fill and marks

data-head
splitstackedcenter

heading beside the intro, stacked, or centred

data-anim
risefadenone

how the heading enters

data-link
truefalse

spec-sheet link under the intro

Component props 4

Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.

Assembly Stage1 in this pattern · 23 props
PropTypeDefault
mode
text

scrub

order
text

sequence

spread
text

m

tilt
text

soft

depth
true / false

True

fade
true / false

False

stagger
text

m

distance
text

m

smooth
true / false

True

once
true / false

False

duration
number

1200

easing
text

smooth

pinLength
number

160

hover
text

lift

surface
text

grid

gap
text

m

radius
text

l

rowHeight
text

m

showMeter
true / false

True

meterLabel
text

Assembly

busyLabel
text

Assembling

doneLabel
text

Assembled

label
text

Arvik R2, part by part

Assembly Part9 in this pattern · 30 props
PropTypeDefault
variant
text

feature

tone
text

surface

col
number

1

row
number

1

colSpan
number

2

rowSpan
number

1

mobile
text

half

showTag
true / false

True

part
text

01

partName
text

Frame

showImage
true / false

False

image
text

https://images.unsplash.com/photo-1532298229144-0ec0c57515c7?w=1400

imageAlt
text

empty

focal
text

center

shade
text

soft

icon
text

none

showValue
true / false

False

value
text

7.4

showUnit
true / false

False

unit
text

kg

showTitle
true / false

True

title
text

Part title

headingLevel
text

h3

showText
true / false

True

text
text

A short line about this part.

showMeta
true / false

False

meta
text

Lena Holt, Velo Nord

showLink
true / false

False

url
text

#

linkLabel
text

Read more

Assembly Chip4 in this pattern · 2 props
PropTypeDefault
label
text

Hydraulic discs

showIcon
true / false

True

Assembly Button1 in this pattern · 4 props
PropTypeDefault
label
text

Configure

url
text

#configure

style
text

dark

showArrow
true / false

True

Included in Pro From €39 a year, with all 469 patterns.

Get Pro

More patterns

Keep browsing.

L-000

Quick View

Desktop, 1440px
Pro
demo.etchedy.com

The real preview of this pattern. Every pattern adapts to your ACSS tokens.

Unlock with ProSee plansIncluded in your plan