Uilora Pop Color
Uilora Pop — vibrant multi-color masonry grid with bold color tiles and image cards in a playful layout.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [/* 6 Unsplash URLs */] | Array of 6 image URLs for the image tiles. |
| backgroundColor | string | "#f8f5f0" | Warm off-white base for the grid background. |
| heading | string | "Uilora Pop" | Large display heading shown above the grid. |
When to Use
Use Uilora Pop for consumer apps, lifestyle brands, e-commerce product showcases, and creative portfolios that want a vibrant, energetic aesthetic. The color-blocked tiles create natural visual hierarchy.
Best Practices
The 9 TILE_COLORS are carefully balanced — avoid overriding them unless needed. Use diverse photography to complement the varied backgrounds. The scale(0.94) entrance animation works best with a viewport intersection observer for performance.
Why This Component Matters
Uilora Pop helps you build premium Uilora-powered interfaces that feel alive and energetic. The color tile system creates natural information hierarchy without relying on typography size alone.
FAQ
QHow are the tile colors defined?
TILE_COLORS is a fixed array of 9 {bg, text} pairs — each carefully chosen for contrast and vibrancy. ColorTile uses these to render solid-color cards alongside image tiles.
QCan I add more color tiles?
Yes — extend the TILE_COLORS array and add more ColorTile placements in the column structure.
QWhat's the dot indicator in the header?
Three colored dots (red, green, blue) serve as a visual brand accent — inspired by app window controls and palette indicators.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.