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


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.


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.