Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageSpotlight Border Cards
Feature section with four cards in an asymmetric grid (one tall card, one wide card, two regular), built as a plain editable Etch tree: section > container > header (h2, intro) > Grid of "Spotlight Card" component instan…
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.
Spotlight Border 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
- Component
- Category
- Cards
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 8
Set on the section, in Etch’s attributes panel. No code needed.
data-themesurface palette
data-glowcolour of the rim arc and wash
data-reachhow far from a card the pointer still lights its rim
data-arclength of the lit arc on the border
data-surfacecard surface style
data-radiuscorner radius of the cards
data-followhow quickly the arc swings round to the pointer
data-touchon touch screens, a tap lights the card from the tap point and eases out
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
iconbolt
sizeregular
showBadgeFalse
badgeNew
titleInstant cold starts
textFunctions boot from a warm snapshot, so the first request feels like…
showLinkTrue
linkLabelRead more
url#
showRingsTrue
Included in Pro From €39 a year, with all 753 patterns.
Get Pro
