Uilora Collection
Uilora Collection — editorial e-commerce bento masonry grid with vertical text tile, product cards, 'SHOP NOW >' CTAs, and a 5-column layout.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [/* 6 Unsplash URLs */] | Array of 6 image URLs for the collection product tiles. |
| backgroundColor | string | "#faf7f0" | Warm cream background for the collection page. |
| accentColor | string | "#e8720c" | Accent color for 'SHOP NOW >' links, vertical text, and the Fall Gear circle button. |
| heading | string | "Uilora Collection" | Internal heading reference (passed to nav wordmark). |
When to Use
Use Uilora Collection for fashion e-commerce, product collection pages, seasonal drops, and editorial shopping experiences. The vertical text tile creates an unmistakable visual anchor that communicates the season or theme.
Best Practices
The 5-column grid uses fractional units (0.7fr 1.1fr 1fr 1fr 0.8fr) — keep the VerticalTextTile in column 1 and the featured CollectionTile (height 460) in column 4 for the intended visual hierarchy.
Why This Component Matters
Uilora Collection helps you build premium Uilora-powered e-commerce interfaces that feel like high-fashion editorial spreads. The vertical text column immediately communicates seasonal identity while the product cards provide clean browsing and purchase intent.
FAQ
QHow does the VerticalTextTile work?
It maps an array of characters (e.g. ['F','A','L','L',"'",'2','4']) to individual span elements stacked in a flex column — each character is 46px Georgia 900 weight in the accentColor.
QCan I change the season text?
The letters array is hardcoded in the component. To make it customizable, add a seasonLetters prop to MasonryCollection and pass it to VerticalTextTile.
QWhat makes the 'SHOP NOW >' link style work?
It's a standard anchor tag with textDecoration: underline, color: accentColor, fontWeight: 600, and letterSpacing: 0.04em — a clean, readable CTA that works across any accent color.
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.