Skip to content
E-198Element

Skew Reveal Product Card

Product card with a skewed accent field behind the product photo that tilts on hover, a large watermark word and a buy button that slides up and fades in. Card component props: image, imageAlt, name, price, cents, curre…

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.

Skew Reveal 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 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
yellowvioletredgreen

colour of the skewed field and button

data-skew
softstrong

hover tilt amount

Component props 1

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

Skew Product Card2 in this pattern · 10 props
PropTypeDefault
image
text

https://images.unsplash.com/photo-1527814050087-3793815479db?w=700

imageAlt
text

White wireless gaming mouse

name
text

Mouse Corsair M65

price
text

61

cents
text

98

currency
text

€

buyLabel
text

Buy Now

url
text

#

watermark
text

CORSAIR

showWatermark
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