Magazine
Magazine-style pricing section with editorial layout.
Main Features of Magazine
How to Use Magazine in Next.js
Installation Guide for Magazine
Props
Customize the component with these 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. |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.