Editorial Split
Editorial split FAQ with sticky sidebar.
Main Features of Editorial Split
How to Use Editorial Split in Next.js
Installation Guide for Editorial Split
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
faqs | Array<{q: string, a: string}> | [] | Array of FAQ items with question (q) and answer (a). |
backgroundColor | string | #ffffff | Background color (hex, rgb, or hsl). |
sidebarBgColor | string | #f5f5f5 | Sidebar background color. |
sidebarTextColor | string | #000000 | Sidebar text color. |
title | string | FAQ | Section title text. |
titleAccentColor | string | #2563eb | Title accent color (dot color). |
subtitle | string | Everything you need to know about the product and billing. | Section subtitle text. |
subtitleColor | string | #737373 | Subtitle text color. |
currentTopicLabel | string | Current Topic | Label text for current topic indicator. |
currentTopicLabelColor | string | #a3a3a3 | Current topic label color. |
contentBgColor | string | #ffffff | Content area background color. |
contentTextColor | string | #000000 | Content text color. |
borderColor | string | #e5e5e5 | Border color for dividers. |
badgeBgColor | string | #000000 | Badge background color. |
badgeTextColor | string | #ffffff | Badge text color. |
questionColor | string | #000000 | Question text color. |
answerColor | string | #737373 | Answer text color. |
ctaBgColor | string | #dbeafe | CTA section background color. |
ctaTextColor | string | #000000 | CTA text color. |
ctaButtonBgColor | string | #000000 | CTA button background color. |
ctaButtonTextColor | string | #ffffff | CTA button text color. |
ctaTitle | string | Still have questions? | CTA title text. |
ctaSubtitle | string | Can't find the answer you're looking for? | CTA subtitle text. |
ctaButtonText | string | Contact Support | CTA button text. |
Related Components
When to Use
Ideal for content-heavy sites, corporate landing pages, and Next.js applications that require a structured, informative layout. Use this React component for an editorial-style FAQ section with a sticky sidebar and integrated call-to-action.
Best Practices
Follow React best practices by pairing this with bold, professional typography. Maintain scalable component architecture by using the sticky sidebar for secondary navigation. Optimize for performance by ensuring the sidebar only sticks on desktop views.
Why This Component Matters in Modern UI Development
Editorial layouts provide a sense of hierarchy and authority. This production-ready component helpsคุณ build an interface that feels academic and reliable, improving the efficiency of information retrieval for your users.
Frequently Asked Questions
QIs the sidebar sticky?
Yes, the sidebar stays in view as the user scrolls through the FAQ content, ensuring the context is never lost.
QCan I add more categories?
The layout is designed for a single primary category, but can be easily extended to support multiple sections with a tabbed sidebar.
QDoes it support long answers?
The split layout provides ample horizontal space for detailed answers and supporting information without visual clutter.