Magazine
Magazine-style pricing section with editorial layout.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| issueText | string | Issue 024 • The Collection | Issue text displayed above title. |
| title | string | Vogue | Section title text. |
| subtitle | string | Subscription Tiers | Section subtitle text. |
| plans | Array<{name: string, price: number, description?: string, image?: string}> | [] | Array of pricing plans with name, price, description, and optional image URL. |
| backgroundColor | string | #f5f5f0 | Background color (hex, rgb, or hsl). |
| cardBgColor | string | #ffffff | Card background color. |
| cardShadowColor | string | rgba(0,0,0,0.1) | Card shadow color. |
| badgeBgColor | string | #000000 | Badge background color. |
| badgeTextColor | string | #ffffff | Badge text color. |
| titleColor | string | #1a1a1a | Title text color. |
| dividerColor | string | #000000 | Divider color. |
| subtitleColor | string | #6b7280 | Subtitle text color. |
| planNameColor | string | #1a1a1a | Plan name text color. |
| planDescColor | string | #6b7280 | Plan description text color. |
| priceColor | string | #1a1a1a | Price text color. |
| buttonTextColor | string | #000000 | Button text color. |
| buttonHoverTextColor | string | #6b7280 | Button hover text color. |
| buttonBorderColor | string | #000000 | Button border color. |
| buttonHoverBorderColor | string | #6b7280 | Button hover border color. |
| footerText | string | Printed in Italy • 100% Recycled Paper | Footer text. |
| footerTextColor | string | #9ca3af | Footer text color. |
| buttonText | string | Subscribe | Button text. |
When to Use
Ideal for lifestyle blogs, high-end publications, and Next.js sites that want a sophisticated, editorial layout. Use this React component for a magazine-style pricing section with high-quality imagery and classic serif typography.
Best Practices
Follow React best practices by pairing this with high-resolution portraits or product photography. Maintain consistent spacing within your design system by using it on off-white or paper-textured backgrounds. Optimize for performance by lazy-loading the plan images.
Why This Component Matters
Magazine layouts add a sense of luxury and curated taste to digital subscriptions. This production-ready UI component helpsคุณ build an interface that feels like a high-end coffee table book, improving the perceived quality of your content.
FAQ
QCan I use vertical images?
The component is optimized for high-impact vertical or square imagery, typically used to represent different magazine issues or membership levels.
QIs the typography Serif?
Yes, it uses a classic Serif font for the title and plans to reinforce the 'printed publication' aesthetic.
QDoes it support long summaries?
The `planDescColor` and layout are designed for brief, evocative summaries that entice the user without overcrowding the editorial space.
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.