Accordion
Accordion patterns for dense FAQs, settings clusters, and progressive disclosure
Use accordions when a page needs to compress multi-step explanations or grouped controls without losing hierarchy. This page standardizes density, open-state rules, icon treatment, and summary metadata across Lumora.
Stacked variants
Collapse
behavior
Live playground
Copy-ready snippets
1. Variant Matrix
Default, soft, compact, and spacious stacks for different densities
Default surface
Summaries work well when the top line names the
topic and the body carries version details, risks,
or follow-up actions.
Group related actions into a single panel instead of
scattering permission copy across tabs and modals.
Soft surface with icon chips
Use icon chips when the summary needs a stronger
visual cue than text alone, especially in settings
and operational panels.
2. Interaction Playground
Tune style, density, and open-state rules for a live preview
The preview is re-rendered on every change and keeps
Bootstrap collapse behavior active.
Live Output
Default style, cozy density, first item open.
3. Layout and Density
Choose density based on reading length and screen pressure
Compact utility stack
Compact headers keep list-like documentation tight
without making the tap target feel cramped.
Spacious narrative stack
Spacious accordions work well for FAQs, onboarding
sequences, and expandable settings blocks with
multiple paragraphs.
4. State Modeling
Single-open discipline, multi-open exploration, and disabled summaries
Single-open configuration
Use a shared parent when only one panel should remain open at a time.
Single-open mode reduces vertical sprawl in settings
pages and compliance checklists.
Keep rollback copy close by but collapsed until the
operator needs it.
Disabled summary
5. Composition Patterns
Use accordions inside FAQs, settings groups, and step-by-step explainers
FAQ slice
Tabs are still better for peer-level sections.
Accordions win when users need to scan summaries
before choosing where to dive deeper.
Settings cluster
This pattern keeps each settings family compressed
while preserving full control descriptions and
helper copy inside the panel body.
6. Real-use Snippets
Copy-ready accordion markup for FAQs, settings, and compact utility panels
Default Accordion
<div class="accordion accordion-lumora" id="faqAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faqOne">
Shipping timeline
</button>
</h2>
<div id="faqOne" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
<div class="accordion-body">Detailed answer.</div>
</div>
</div>
</div>
Soft Summary with Meta
<div class="accordion accordion-lumora accordion-lumora--soft" id="settingsAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#settingsOne">
<span class="accordion-summary">
<span class="accordion-summary__title">Notification channels</span>
<span class="accordion-summary__meta">Email, SMS, and push options</span>
</span>
</button>
</h2>
</div>
</div>
Multi-open Stack
<div class="accordion accordion-lumora accordion-lumora--compact" id="multiAccordion"> <div class="accordion-item">...</div> <div class="accordion-item">...</div> </div> <!-- Omit data-bs-parent when multiple panels may remain open -->