Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageTeam Crossfade Hover Cards
Team grid built as a plain editable Bricks tree: section > container > header (eyebrow, h2, intro) > grid > four "Crossfade Team Card" component instances. Only the card is a component, with typed props: photo (image), pho…
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.
Team Crossfade Hover 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
- Team cards
- Responsive
- Desktop to phone
- Works with
- Bricks, ACSS, plain CSS
Options 7
Set on the section, in Bricks’ attributes panel. No code needed.
data-themeon the section re-themes the whole block
data-columns-tablet2-4 · on the Grid
data-gappx between cards · on the Grid
data-ratiophoto aspect 4:5, 1:1 or 3:4, on the Grid
data-radiuscorner radius from the ACSS radius tokens, on the Grid
data-revealon the Grid — hover reveals the bio on hover/focus/tap, always keeps it open permanently
data-treatmenton the Grid — idle photo look: true colour, or a desaturated look that warms to colour on reveal
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
photohttps://images.unsplash.com/photo-1580489944761-15a19d654956?w=640
photoAltPortrait of Priya Nandakumar
photoHoverempty
photoHoverAltempty
namePriya Nandakumar
nameTagh3
roleVisual Designer
bioCrafts clean interfaces with a focus on clarity, motion and quiet con…
linkedinUrlhttps://linkedin.com
Included in Pro €99 once with Pro Unlimited Lifetime: all 785 patterns, unlimited sites.
Get Pro
