v0.0.3

Documentation version

Open files in your editor

Project folderVersion

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.

Open files in

ComponentsLumos 0.0.2NewOpen component

AccordionItem

One section of an accordion: a heading that opens it, and whatever is inside.

An item is a <details> with a <summary> that carries the heading. It belongs inside an Accordion, which is what decides whether opening one closes the others.

astro

<AccordionItem heading="What do you need from me?" headingTag="h3">
  <Paragraph>Copy, images, and someone who can make decisions.</Paragraph>
</AccordionItem>

<AccordionItem heading="What do you need from me?" headingTag="h3">
  <Paragraph>Copy, images, and someone who can make decisions.</Paragraph>
</AccordionItem>

Props

Prop	Type	Default	What it does
`render`	`boolean`	`true`	Set to `false` to skip this component and everything inside it.
`heading`	`string`	None	The item's title, on the control that opens it.
`headingTag`	`"h2" \| "h3" \| "h4" \| "h5" \| "h6"`	`"h3"`	The heading level, for the page outline. Every accordion heading is the same size whichever level you pick — the level is about the document, not the design.
`open`	`boolean`	`false`	Opens this item on load.

Pick the level for the outline

The headings in an accordion are real headings, and a screen reader can list them to move around the page. That only helps if they sit at the right depth: an accordion under an <h2> wants h3 items, and the same accordion under an <h3> wants h4. Nothing about how it looks changes.