Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageCircle Fill Hover Card
Service cards with a signature fill: the round badge behind each icon is a clip-path circle that grows on hover or keyboard focus until the whole card is flooded with colour, and the copy, tags and arrow invert on top of…
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.
Circle Fill Hover 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
- Component
- Category
- Cards
- Responsive
- Desktop to phone
- Works with
- Bricks, ACSS, plain CSS
Options 13
Set on the section, in Bricks’ attributes panel. No code needed.
data-themedata-layoutsplit = sticky header column beside the cards on wide screens, stacked = header above
data-columnscards per row on wide containers (stacked layout
data-fillsection fill colour
data-originwhere the circle grows from: the icon badge, the point where the pointer enters (and it shrinks toward where it leaves), the top-end corner or the middle
data-durationms · fill speed
data-easingdata-surfaceresting card style
data-radiuscard corners
data-densitycard padding
data-animentrance when the grid scrolls into view
data-staggerms · delay between cards
data-ctashow the header button
Component props 2
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
labelNaming
iconspark
fillsection
showIndexTrue
index01
showBadgeFalse
badgeMost booked
titleBrand identity
headingLevelh3
url#brand-identity
showDescriptionTrue
descriptionNaming, marks and type systems built to survive a thousand small uses.
showTagsTrue
showMetaTrue
metaFrom 4 weeks
showCtaTrue
ctaLabelExplore
Free pattern. Yours to use on any site, no plan needed.
Included in Pro €99 once with Pro Unlimited Lifetime: all 785 patterns, unlimited sites.
Get Pro
