Editorial Mono
Editorial monochrome pricing section with typography focus.
Main Features of Editorial Mono
How to Use Editorial Mono in Next.js
Installation Guide for Editorial Mono
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
title | string | PRI | Section title text (first part). |
title2 | string | CING | Section title text (second part). |
subtitle | string | Select a tier that aligns with your ambition. Transparency is our only currency. | Section subtitle text. |
plans | Array<{name: string, price: number, number?: string}> | [] | Array of pricing plans with name, price, and optional number. |
features | string[] | [] | Array of feature strings to display. |
backgroundColor | string | #ffffff | Background color (hex, rgb, or hsl). |
borderColor | string | #000000 | Border color. |
sidebarBgColor | string | #ffffff | Sidebar background color. |
sidebarTextColor | string | #000000 | Sidebar text color. |
planNameColor | string | #000000 | Plan name text color. |
planNumberColor | string | #000000 | Plan number text color. |
priceColor | string | #000000 | Price text color. |
featureTextColor | string | #000000 | Feature text color. |
featureIncludedColor | string | rgba(0,0,0,0.3) | Feature included indicator color. |
buttonBorderColor | string | #000000 | Button border color. |
buttonTextColor | string | #000000 | Button text color. |
buttonHoverBgColor | string | #000000 | Button hover background color. |
buttonHoverTextColor | string | #ffffff | Button hover text color. |
footerText | string | (c) 2024 Design Systems Inc. All Rights Reserved. | Footer text. |
footerTextColor | string | #000000 | Footer text color. |
buttonText | string | Subscribe | Button text. |
Related Components
When to Use
Ideal for artistic agencies, architecture firms, and Next.js sites that want a sophisticated, monochrome aesthetic. Use this React component for an editorial-style pricing section with large typography and clean grid lines.
Best Practices
Follow React best practices by pairing this with bold, high-contrast typography. Maintain consistent spacing within your design system by using it on pure white or light gray backgrounds. Optimize for performance by using efficient grid layouts.
Why This Component Matters in Modern UI Development
Editorial layouts add a sense of authority and timelessness to digital content. This production-ready UI component helpsคุณ build an interface that feels like a high-end publication, improving the perceived exclusivity of your product.
Frequently Asked Questions
QWhy is it monochrome?
The mono aesthetic focuses the user's attention on the typography and the raw information, creating a sophisticated and professional look.
QCan I add color accents?
Yes, while designed for mono, you can easily inject brand colors via the `buttonHoverBgColor` and other styling props.
QIs the sidebar customizable?
The `sidebarBgColor` and `sidebarTextColor` props allow you to customize the left-hand branding area for different themes.