Uilora Timeline
Dark timeline FAQ with alternating cards and glowing nodes.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| faqs | Array<{q: string, a: string}> | 6 Uilora FAQs | Array of FAQ items. |
| title | string | Common Questions | Section heading. |
| subtitle | string | FAQ | Uppercase tag above heading. |
| accentColor | string | #5227FF | Timeline glow and number accent color. |
When to Use
Perfect for dark-themed landing pages, developer tools, and tech products that want a unique FAQ layout with visual depth and timeline progression.
Best Practices
Use 4-8 items for a balanced timeline. The alternating layout works best on desktop — mobile collapses to a single column automatically.
Why This Component Matters
The timeline layout transforms a mundane FAQ into a visual journey. The alternating cards and glowing nodes add architectural interest that keeps users scrolling.
FAQ
QDoes it work on mobile?
Yes, the timeline collapses to a single column with the line on the left edge for mobile devices.
QCan I change the glow color?
Yes, the accentColor prop controls the timeline node glow and number label color.
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.