Accordion

An accordion or alert box that can be styled and used to provide more information to users.

Example

Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor mauris et nisl lobortis, nec efficitur lectus placerat. Nunc ultricies libero quis justo feugiat, at dapibus ex egestas. Donec cursus euismod mauris, ut pellentesque est scelerisque quis. Vestibulum pellentesque dui ut congue tempor. Morbi sit amet elit nec sapien auctor fringilla.

Implementation

<details>
  <summary>Title</summary>
  <div>...</div>
</details>

About the wrapping div

You should wrap the content that doess not to the header/summary, in an HTML tag (e.g. p, div) for the opening animation to work.

Custom properties

There are several custom properties available that can be overwritten to control the looks of the table. You can change these properties on the details selector.

Custom property	Description
`--accordion-border`	Sets the `border-color` property.
`--accordion-surface`	Sets `background-color` property of the header (also known as the `summary`).
`--accordion-radius`	Sets `border-radius` property.