ComponentsSpec
Accordion
Native details and summary, restyled. Use it for FAQs and long reference material that most readers skip.
What does Dentomate cost?
Pricing is set per clinic after a call. The case study leaves it out on purpose.
Which tools made the brand assets?
The heyrav tools: Line Field, Grid Pens, Dot Matrix, Stagger and Glitch.
Is there a dark theme?
Defined in the system, opt-in with data-theme="dark". The portfolio stays light.
Show code
<div class="d-w-md">
<details class="acc" open><summary>What does Dentomate cost? <svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></summary><div class="acc-body">Pricing is set per clinic after a call. The case study leaves it out on purpose.</div></details>
<details class="acc"><summary>Which tools made the brand assets? <svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></summary><div class="acc-body">The heyrav tools: Line Field, Grid Pens, Dot Matrix, Stagger and Glitch.</div></details>
<details class="acc"><summary>Is there a dark theme? <svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></summary><div class="acc-body">Defined in the system, opt-in with data-theme="dark". The portfolio stays light.</div></details>
</div>Guidelines
Do
- Write the summary as the question the reader has.
- Open the first item when the section is the page's main content.
Don't
- Hide the one thing the reader came for inside a collapsed panel.
- Nest accordions.
Accessibility
<details> is keyboard and screen-reader ready with no script. The plus rotates to a cross (45°) on open; it is decorative.