Uilora Light Bento
Light fintech-inspired bento grid with portfolio chart, donut pie, transaction list, code block, and integration logo grid on a soft gray background.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Customize at will | Headline shown in the accent-colored CTA card (bottom-left). |
| description | string | For anyone to start building their design system, no matter the size of your team. | Description shown below the title in the CTA card. |
| accentColor | string | #bbf451 | Lime/neon accent hex — used for the CTA card background, portfolio badge, donut chart segment, and expected-reach icon. |
When to Use
Perfect for SaaS product pages, component library landing sections, and fintech-style feature showcases that want a clean, light aesthetic. Use this as the light companion to UiloraFeatureGrid.
Best Practices
Keep accentColor vivid — muted colors lose contrast on the white cards. The CTA card title works best at 2–4 words. The chart, donut, code block, and logos are Uilora-branded defaults; fork the component to customize the inner UI mocks.
Why This Component Matters
Light bento layouts balance information density with visual breathing room. The fintech-inspired UI mocks inside each card add instant credibility and make abstract features feel tangible.
FAQ
QWhat controls the donut chart colors?
The first segment uses accentColor, the second is purple (#a855f7), the third is gray, and the fourth is near-black — hardcoded for the Uilora brand palette.
QCan I change the line chart data?
The chart uses a fixed 13-point wavy dataset. Clone the component and replace rawData with your own values.
QAre the logos real brand logos?
No — they are colored rounded squares with text abbreviations that visually reference popular tools. This avoids trademark issues while keeping the design recognizable.
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.