Skip to content
E-175Element

Cart Stepper Card

Shop card row with horizontal scroll-snap. Each card has a favourite star, a soft photo frame, a title, a line of text, the price and a gradient Add to cart button. Pressing it swaps the button for a quantity stepper (m…

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.

Cart Stepper Card 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
Element
Category
Cards
Responsive
Desktop to phone
Works with
Etch, ACSS, plain CSS

Options 4

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

data-theme
lightdark

surface behind the cards

data-anim
risefadenone

entrance

data-accent
ambervioletgreenpink

accent colour

data-layout
rowgrid

scrolling row or wrapping grid

Component props 1

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

Cart Stepper Card5 in this pattern · 10 props
PropTypeDefault
image
text

https://images.unsplash.com/photo-1491553895911-0055eca6402d?w=700

imageAlt
text

Black running shoe on a white background

title
text

Training shoes

text
text

Comfortable foam cushioning, light mesh and a grippy sole.

price
text

129.99$

addLabel
text

Add to cart

lessLabel
text

Remove one

plusLabel
text

Add one

qtyLabel
text

Quantity

starLabel
text

Add to favourites

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