Luxury Gold
Luxury gold stats section with serif typography and gradients.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| badgeText | string | Performance Metrics | Badge text displayed above title. |
| title | string | Our Legacy in Numbers | Section title text. |
| stats | Array<{value: number, suffix?: string, label: string}> | [] | Array of stat items with value, optional suffix, and label. |
| backgroundColor | string | #0a0a0a | Background color (hex, rgb, or hsl). |
| dividerColor | string | #D4AF37 | Divider line color. |
| badgeColor | string | #D4AF37 | Badge text color. |
| titleColor | string | #ffffff | Title text color. |
| dividerLineColor | string | rgba(255,255,255,0.1) | Vertical divider line color. |
| valueGradientFrom | string | #D4AF37 | Value gradient start color. |
| valueGradientTo | string | #8a7020 | Value gradient end color. |
| labelColor | string | rgba(163, 163, 163, 1) | Label text color. |
| labelHoverColor | string | #ffffff | Label text color on hover. |
When to Use
Ideal for luxury brands, high-end real estate, and Next.js applications that want a sophisticated 'Legacy' aesthetic. Use this React component for a stats section that highlights premium performance metrics with Serif typography and gold gradients.
Best Practices
Maintain consistent spacing within your design system by using it on deep navy or black backgrounds. Follow React best practices by pairing it with elegant, light-weight Serif fonts. Optimize for performance by using efficient linear-gradients for the numerical highlights.
Why This Component Matters
Luxury aesthetics communicate exclusivity and history. This production-ready UI component helpsคุณ build an interface that feels established and high-value, improving the perceived quality of your brand's growth.
FAQ
QIs the Serif font required?
While designed for Serif, you can swap it via your CSS theme for a more modern Sans-Serif look while keeping the gold accents.
QCan I change the divider color?
Yes, the `dividerColor` prop allows you to set the highlight color of the top divider to match your brand's primary color.
QDoes it support long labels?
The layout is optimized for 2-4 word labels like 'Global Transactions' or 'Trusted Partners' to maintain its editorial feel.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.
Enjoying Uilora? Unlock the full library.
56+ premium components, unlimited CLI, unlimited MCP, v0 + Claude prompts — one payment, forever.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.