Skip to content
E-187Element

Overlap Product Card

Wide product card: a rounded colour block with a rotated word mark, a dark detail panel that overlaps it, a product photo that straddles both, round arrow buttons, a size picker, a ring gauge, a rounded add-to-cart butt…

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.

Overlap Product 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 3

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
redbluegreenviolet

colour of the block, gauge and button

Component props 1

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

Overlap Product Card1 in this pattern · 11 props
PropTypeDefault
image
text

https://images.unsplash.com/photo-1583394838336-acd977736f90?w=900

imageAlt
text

Over-ear headphones

wordmark
text

SOUND

title
text

STUDIO HEADPHONES

price
text

$299.99

sizeLabel
text

EAR CUP SIZE

gaugeValue
text

75%

gaugeLabel
text

BATTERY LEVEL

cartLabel
text

ADD TO CART

wishLabel
text

ADD TO WISHLIST

url
text

#

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