Uilora Service Grid
3×2 pastel bento with unique geometric SVG illustrations per card — mint, lavender, dark (featured), gray, light-blue, and cream variants.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Focus on developer experience | Title text for the dark featured card (center-right). |
| description | string | Prioritizing clean APIs and intuitive integration, ensuring developers ship beautiful UIs with Uilora. | Description text for the dark featured card. |
| accentColor | string | #22d3ee | Color of the crosshair/plus symbol on the dark featured card. |
When to Use
Perfect for agency portfolios, service pages, and component library feature sections that want a visually rich, pastel-toned 3×2 grid with unique geometric illustrations per card.
Best Practices
The dark featured card stands out most with a vivid accentColor (cyan, violet, lime). Keep card text concise — 1 line title, 2 lines description — to maintain visual balance across all 6 cards.
Why This Component Matters
The contrast between the 5 soft pastel cards and 1 dark featured card creates instant visual hierarchy. The unique SVG illustrations (diamond chain, arrow pattern, crosshair, dash grid, resize arrows) give each card a distinct identity without photos.
FAQ
QCan I change individual card colors?
Card background colors are hardcoded as Uilora's pastel palette. Clone the component and edit the cards array to customize each card's bg.
QWhat do the SVG illustrations represent?
Diamond chain = connection/integration, ascending arrows = growth/APIs, crosshair = precision/DX, dash grid = quality, resize arrows = flexibility, diamond chain again = solutions.
QIs the grid responsive?
Yes — it collapses to 2 columns on tablet and 1 column on mobile.
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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.