Library · Foundations

Accordion

A fully accessible WAI-ARIA accordion built on native <details>/<summary>, with smooth open/close transitions (uses ::details-content, which has limited browser support outside modern Chromium/Firefox).

Figma: Primitives / Accordion ↗

Live preview — edit theme bottom-right

---
import Accordion from "../components/primitives/accordion/Accordion.astro";
import AccordionItem from "../components/primitives/accordion/AccordionItem.astro";
---
<Accordion>
  <AccordionItem title="What is included in the package?" open>
    <p>Our package includes design, development, and ongoing support for your property marketing needs.</p>
  </AccordionItem>
  <AccordionItem title="How long does delivery take?" variant="chevron">
    <p>Typical turnaround is two to three weeks depending on scope and revisions required.</p>
  </AccordionItem>
  <AccordionItem title="Can I request changes after launch?">
    <p>Yes, minor revisions are covered for thirty days after go-live, with larger changes quoted separately.</p>
  </AccordionItem>
</Accordion>

Props

Name	Type	Required	Description
`class`	`string`	—	Additional classes to apply to the accordion container
`children`	`AccordionItem \| AccordionItem[]`	Yes	Accordion items to render
`[key: string]`	`string \| number \| boolean \| undefined \| AccordionItem \| AccordionItem[]`	—	HTML attributes to spread on the accordion
`Item: class`	`string`	—	Additional classes to apply to the item
`Item: title`	`string`	Yes	Title text displayed in the accordion header
`Item: name`	`string`	—	Optional name attribute for the details element
`Item: headingLevel`	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'`	—	Heading level for the title (h1-h6) (default: 'h3')
`Item: headingSize`	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'`	—	Visual size of the heading (can differ from semantic level) (default: 'h6')
`Item: variant`	`'default' \| 'chevron'`	—	Visual style variant of the accordion (default: 'default')
`Item: open`	`boolean`	—	Whether the accordion item is initially open (default: false)
`Item: [key: string]`	`string \| number \| boolean \| undefined`	—	HTML attributes to spread on the accordion item

Example with all props

<Accordion class="faq-accordion" data-analytics="faq">
  <AccordionItem
    class="faq-item"
    title="What is included in the package?"
    name="faq"
    headingLevel="h3"
    headingSize="h6"
    variant="chevron"
    open
    data-question-id="included"
  >
    <p>Answer content goes in the default slot.</p>
  </AccordionItem>
</Accordion>