Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageServices Icon Cards
Agency services section: section > container > header (eyebrow, h2, intro, all-services link) > a grid of "Icon Service Card" component instances. Each card has an icon tile (code, design, growth, strategy, content, comm…
50 sites for €79 only, Compare all plans
The system behind it
One pattern, your whole brand.
Services Icon Cards 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
- Services
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 12
Set on the section, in Etch’s attributes panel. No code needed.
data-themesection surface
data-accentACSS colour for icon tiles, hover line, featured card and links
data-surfacecard treatment
data-columnscards per row on wide containers
data-icon-styleicon tile shape
data-alignsplit puts the intro and CTA beside the heading, center stacks everything
data-densitycard padding
data-radiuscard corner radius
data-animdata-durationms
data-staggerms
data-onceentrance motion when the grid scrolls into view
Component props 2
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
labelWordPress
iconcode
showIndexTrue
index01
titleWeb development
headingLevelh3
descriptionFast, accessible WordPress builds your team can edit without calling…
showTagsTrue
tag1WordPress
tag2Headless
tag3Performance
showMetaTrue
metaFrom 6 weeks
showLinkTrue
linkLabelExplore
href#web-development
featuredFalse
Included in Pro From €39 a year, with all 469 patterns.
Get ProMore patterns
