Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageDuotone Topic Wall
Dark editorial topic grid built as a plain, fully editable Etch tree: section > container > header (eyebrow, h2, view-all link) > a 2×2 grid of four full-bleed "Topic Panel" component instances (cover art, scrim, index b…
50 sites for €79 only, Compare all plans
All photos and visual assets used in this preview are sourced from Unsplash.
The system behind it
One pattern, your whole brand.
Duotone Topic Wall 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
- Grids and cards
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 14
Set on the section, in Etch’s attributes panel. No code needed.
data-themere-themes the whole section
data-columnsgrid columns at desktop width (always 1 below tablet, 2 from tablet)
data-hoverhover/focus effect: pointer-tracked 3D tilt with a sheen highlight, a duotone-to-full-colour image crossfade, a plain lift, or nothing
data-tilt-intensitydeg
data-radiuscorner radius from the ACSS radius tokens
data-animscroll-entrance preset for the cards
data-durationms
data-easingor a cubic-bezier
data-delayms
data-staggerms between cards
data-distancepx the cards travel in · and
data-triggerdata-oncereplay entrance every time it scrolls into view
data-reducedwhat plays under prefers-reduced-motion instead of the full entrance
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
imagehttps://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=900
imageAltAbstract cover art for Reading the room before the room speaks
index01
showIndexTrue
tagSignals
showTagTrue
toneviolet
titleReading the room before the room speaks
metaWritten by Nadia Kessler
href#topic
Included in Pro From €39 a year, with all 753 patterns.
Get ProMore patterns
