v0.0.3

Documentation version

Currently searching v0.0.3

Search pages, component props, utilities and tokens.

↑↓ to move to openesc to close

Open files in your editor

On a Mac, right-click the folder in Finder, hold Option, and choose Copy as Pathname.On Windows, hold Shift, right-click the folder, and choose Copy as path, then delete the quote marks.

ComponentsLumos 0.0.2NewOpen component

Accordion

A stack of sections that open one at a time, built on <details>.

Accordion wraps a run of AccordionItems and decides how they behave together. It is built on the browser's own <details> element, which is what makes it work before any JavaScript runs — and what makes Find on Page able to search inside a closed section.

astro
<Accordion openFirst>
  <AccordionItem heading="How long does it take?">
    <Paragraph>Usually four to six weeks.</Paragraph>
  </AccordionItem>
  <AccordionItem heading="What do you need from me?">
    <Paragraph>Copy, images, and someone who can make decisions.</Paragraph>
  </AccordionItem>
</Accordion>

Props

PropTypeDefaultWhat it does
renderbooleantrueSet to false to skip this component and everything inside it.
singlebooleantrueOnly one item stays open at a time. Set false to let them open independently.
openFirstbooleanfalseOpens the first item on load. Every item starts closed otherwise.
previewbooleanfalseHolds every item open while a visual builder is in design mode, so the content inside can be edited. Nothing changes on the published page.

How one-at-a-time works

single gives every <details> in the group the same name, which is the browser's own way of saying they are exclusive — opening one closes the others, with no script involved. Each accordion on a page gets a name of its own, so two of them never fight over each other's items.