Editorial Mono
Editorial monochrome pricing section with typography focus.
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. |
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
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.
FAQ
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.
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.