The Mosaic Text & Image Grid is a high-energy, brutalist-inspired widget that breaks the monotony of traditional row-based layouts. Designed for brands that want to communicate vibrancy and diversity, this widget creates a tight, bento-box style grid where typographic statements and visual assets live side-by-side. The layout is composed of interlocking tiles: some purely textual with bold, uppercase typography on colored backgrounds, and others featuring edge-to-edge photography with rounded corners.
This structure allows for a rhythmic reading experience—'GIVE', 'LOVE', 'GET'—interspersed with lifestyle imagery that reinforces the message. It is particularly effective for manifesto sections, community values, or product collection intros. The CSS Grid architecture ensures that the tiles flow naturally across different screen sizes, stacking vertically on mobile while maintaining their proportional relationships on desktop. The text tiles feature editable background colors, allowing you to create a checkerboard pattern that matches your brand palette. Subtle hover animations on the images (grayscale to color, or slight zoom) add a layer of interactivity that rewards exploration without distracting from the core message.
👋 P.S. Have questions? Leave a comment.
