Uilora Studio
Uilora Studio — minimal photo gallery masonry grid with a 'studio.' wordmark, category filter pills, 4-column layout, and spring hover animations.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [/* 10 Unsplash URLs */] | Array of 10 image URLs for the 4-column studio grid. |
| backgroundColor | string | "#f6f6f4" | Off-white background for the studio. |
| wordmark | string | "studio." | Brand wordmark in the top navigation. |
| heading | string | "Uilora Studio" | Internal heading reference (used for accessibility). |
When to Use
Use Uilora Studio for photographer portfolios, image libraries, creative agency galleries, and stock photography platforms. The 4-column grid accommodates more content density while maintaining clean, professional spacing.
Best Practices
Provide exactly 10 images for the best layout. Column 2 gets the 400px hero tile — place your most impactful image at index [3] for maximum visual weight.
Why This Component Matters
Uilora Studio helps you build premium Uilora-powered photography interfaces that feel like dedicated gallery platforms. The category pills and clean navigation give users a sense of control while the grid composition communicates curation.
FAQ
QHow do the category pills work?
They are styled buttons — the first ('Featured') gets a filled black background, all others get an outlined style with border: '1px solid #ccc'. Wiring them to actual filter logic requires adding state and filtering the images array.
QWhy is column 2 offset by marginTop: 24?
The visual offset creates a staggered masonry appearance where column 2's hero tile appears to 'drop in' slightly later, adding depth to the grid composition.
QWhat is the 'Uilora Studio' credit badge?
Each StudioTile has an absolute-positioned pill with backdrop-filter blur in the bottom-right corner — mimicking photo attribution badges used on professional image platforms.
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.