Uilora Soyi
Uilora Soyi — bold serif editorial masonry grid with a vibrant orange outer frame, massive italic heading, and tight 3-column image grid.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [/* 5 Unsplash URLs */] | Array of 5 image URLs for the 3-column editorial grid. |
| outerColor | string | "#e8720c" | Outer frame / border background color (the bold statement color). |
| backgroundColor | string | "#111111" | Inner container background color. |
| heading | string | "Uilora" | Massive italic serif heading centered above the grid. |
When to Use
Use Uilora Soyi for creative studio landing pages, photographer portfolios, editorial platforms, and any brand that wants an unmistakable magazine-cover presence. The outer color frame acts like a branded border for the entire composition.
Best Practices
Use a strong, opinionated outerColor — the contrast between the frame and the black inner container is what makes this grid memorable. The heading uses clamp(5rem, 11vw, 9rem), so it scales naturally with viewport width.
Why This Component Matters
Uilora Soyi helps you build premium Uilora-powered editorial interfaces with an iconic magazine identity. The outer color frame creates a frame-within-a-frame composition that immediately signals intentional, high-end design.
FAQ
QHow does the outer frame work?
The outer div has background: outerColor and padding: '14px 14px 0' — the bottom 0 means the color bleeds into the bottom edge. The inner container sits inside with its own background.
QWhy is the bottom padding 0 on the outer div?
To create the effect of the outer color 'framing' the sides and top like a printed magazine cover border, while the bottom naturally terminates with the content.
QCan I change the image proportions?
Yes — edit the height values in SoyiTile calls. Col 3 has a single 580px tile for an asymmetric tall-column effect.
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.