Uilora Mosaic Grid
Light gray feature section with 5 cards in a 3+2 mosaic bento layout — each card has a unique inline SVG illustration (install notification, theme slider, dual export docs, component tree, ecosystem icons) plus title and description.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Features that make building faster | Section heading, centered above the card grid. |
| description | string | Everything you need to build production UI… | Subtitle below the heading in zinc-500. |
| accentColor | string | #3b82f6 | Hex accent threaded through all 5 illustrations — check circles, slider fill, TSX badge, tree root pill, and first ecosystem icon. |
When to Use
Perfect for product feature pages that need to communicate multiple distinct capabilities visually without relying on screenshots or image assets. The 3+2 mosaic creates hierarchy where bottom cards feel more significant than top ones.
Best Practices
Blue, indigo, and teal accents work well against zinc-50 illustration backgrounds. Keep card titles to 2-3 words. Requires at least 720px container width for illustrations to render clearly.
Why This Component Matters
Inline SVG illustrations ensure zero image dependencies and instant loading. Each illustration is designed thematically for its feature — notification for access, slider for theming, dual docs for export, tree for exploration, and app icons for ecosystem breadth.
FAQ
QHow does the 3+2 layout work?
The grid is `grid-cols-6`. The top 3 cards each use `col-span-2` (3×2=6), and the bottom 2 cards each use `col-span-3` (2×3=6). Both rows fill the full 6-column width, but bottom cards are 50% wider than top cards.
QCan I change the illustration content?
Yes — each illustration is a separate component (IllusInstall, IllusTheme, IllusExport, IllusTree, IllusEcosystem). Edit the SVG paths within each. The `a` prop threads the accentColor through each illustration.
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.