Uilora Asym Grid
Clean asymmetric feature grid on a white background. One large left card with a big 700+ stat and animated mini-bento SVG illustration spans 3 rows, with 3 stacked feature cards on the right.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | A complete system, not just components | Section heading in Georgia serif, left-aligned. |
| description | string | Every piece of Uilora is designed to work together… | Subtitle below heading in zinc-500. |
| accentColor | string | #0ea5e9 | Hex accent used for the badge, the '+' in '700+', the MiniGrid illustration, the monospace label, and icon colors on right cards. |
When to Use
Ideal for light-themed SaaS pages, component library homepages, and product feature sections where you want to lead with a large stat. The asymmetric layout creates visual tension that draws the eye to the 700+ number.
Best Practices
Sky blue, indigo, and emerald accents work best on white. The left card has a very subtle accent tint — brighter accents like red or orange can feel too strong. Keep right card descriptions to 2 lines for visual balance.
Why This Component Matters
The asymmetric grid (1.42fr left vs 1fr right) is visually unusual and creates a strong hierarchy. The animated MiniGrid SVG illustration communicates 'bento layout' abstractly without requiring screenshots.
FAQ
QHow does the row-span-3 left card work?
In CSS grid, the left card has `row-span-3` which makes it expand to fill the same vertical space as the 3 right cards + their gaps. The grid auto-places the 3 right cards into rows 1, 2, and 3 of the right column.
QCan I change the large stat from 700+?
Yes — the '700+' number is hardcoded in the left card JSX. Find `700<span style={{ color: accentColor }}>+</span>` and replace with your own stat. The `+` separately colored by accentColor is a deliberate detail.
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.