Luxury Gold
Luxury gold stats section with serif typography and gradients.
Main Features of Luxury Gold
How to Use Luxury Gold in Next.js
Installation Guide for Luxury Gold
Props
Customize the component with these 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. |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.