Ethereal Minimal
Editorial 2-column photo grid with desaturated-to-color hover, serif italic headings, and Uilora-branded feature items on a white background.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Crafted with intention | Large heading displayed in the top-left of the section header. |
| description | string | Uilora components aren't generated — they're designed, reviewed, and refined until they feel right. | Short description shown top-right opposite the heading. |
| accentColor | string | #6366f1 | Hex accent used for the numbered labels above each feature item. |
When to Use
Best for editorial brands, design studios, boutique agencies, and products that want to signal quality through restraint. The desaturate-to-color hover creates an elegant reveal that rewards exploration.
Best Practices
This component is white-background-only — it pairs best with a white or near-white page. The serif italic typography works best with short, evocative headings (3–6 words). Avoid long feature descriptions as the light font-weight requires comfortable line length.
Why This Component Matters
Minimalism signals confidence. This layout communicates that the product doesn't need visual tricks — the work speaks for itself. The alternating vertical offset adds dynamism without breaking the calm aesthetic.
FAQ
QWhy does every other card have a top margin?
The md:mt-32 offset on odd-indexed cards creates the characteristic staggered editorial grid — each column scrolls into view at a slightly different pace.
QCan I use custom images?
Yes — edit the features array and replace the img URLs. Any 4:3 aspect ratio image works well with the aspect-[4/3] container.
QWhat does the ArrowUpRight icon do?
It appears on hover as a visual affordance suggesting the item is interactive. Wire it to a router.push() or <Link> for real navigation.
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.