Step Cards With Media
How-it-works section with a split header (eyebrow, two-tone title, description, turnaround pill), an ordered list of image-led step cards rendered by an etch/loop through a reusable Step Card component, and a dashed CTA…
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.
Step Cards With Media 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
- How it works
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
step01
durationDay 1
titleMap the brief
headingTagh3
textA focused session to pin down goals, audience and the one metric that…
imagehttps://images.unsplash.com/photo-1553877522-43269d4ea984?w=960&q=75&…
imageAltTeam members arranging sticky notes during a planning session
linkLabelempty
linkUrl#
accentDefault
Included in Pro From €39 a year, with all 753 patterns.
Get ProMore patterns



Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 page





