Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageColor Bloom Grid Gallery
Clean, strict-grid art gallery built as a plain, fully editable Etch tree: section > container > header (eyebrow, h2, intro) > a responsive grid of four "Bloom Tile" component instances — duplicate, reorder or delete til…
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.
Color Bloom Grid Gallery 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
- Galleries
- Responsive
- Desktop to phone
- Works with
- Etch, ACSS, plain CSS
Options 17
Set on the section, in Etch’s attributes panel. No code needed.
data-themere-themes the section
data-columns-desktop1-4 · grid columns per breakpoint (tablet from 34em, desktop from 56em)
data-ratiotile aspect ratio
data-gappx · gap between tiles ·
data-radiustile corner radius
data-hoverbloom = a soft accent-colour glow blooms behind the tile and the caption rises in
data-bloom-strength0-1 · how strong the glow and scale are
data-captionswhen the title chip is visible
data-lightboxclick opens a full-screen viewer with the same order
data-triggerdata-oncedata-durationms
data-easingor cubic-bezier
data-delayms
data-staggerms
data-distancepx · tune the entrance
data-reducedwhat plays under prefers-reduced-motion
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
imagehttps://images.unsplash.com/photo-1502790671504-542ad42d5189?w=700
imageAltAbstract colour field artwork
titleField Study
glowteal
Included in Pro From €39 a year, with all 753 patterns.
Get Pro
