Uilora Grid
Editorial 2-column FAQ grid with serif typography and inline expansion.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| faqs | Array<{q: string, a: string}> | 9 Uilora FAQs | Array of FAQ items. |
| title | string | Frequently Asked Questions | Section heading. |
| subtitle | string | Optional subtitle text. | |
| accentColor | string | #1a1a1a | Icon and accent color. |
When to Use
Great for editorial websites, documentation pages, and minimalist brands that want a clean FAQ table-of-contents style layout.
Best Practices
Use 6-10 items for a balanced 2-column grid. Keep question text short for the best visual rhythm.
Why This Component Matters
The grid layout makes FAQ content scannable at a glance. Users can quickly find their question without scrolling through a long accordion.
FAQ
QCan I make it single-column?
Remove the md:grid-cols-2 class from the grid container to switch to a single column layout.
QDoes it support categories?
This version is flat. Group related questions together in the array for implicit categorization.
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.