Accordion
The accordion component is used to stack multiple <Details/> components.
First option
Second option
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac diam fermentum, sagittis erat at, rhoncus ante. Sed vestibulum orci vel efficitur auctor. Donec tempor odio nec felis blandit, ut vulputate ligula tincidunt. Sed finibus varius finibus. Fusce non enim et metus accumsan commodo. Pellentesque auctor arcu eu consectetur tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac diam fermentum, sagittis erat at, rhoncus ante. Sed vestibulum orci vel efficitur auctor. Donec tempor odio nec felis blandit, ut vulputate ligula tincidunt. Sed finibus varius finibus. Fusce non enim et metus accumsan commodo. Pellentesque auctor arcu eu consectetur tincidunt.
Third option
<Accordion>
<Details>...</Details>
<Details>...</Details>
<Details>...</Details>
</Accordion>Options
The props icon, iconPosition & divider allow you to customize the styling of all details components within the accordion.
Please refer to the details documentation to learn more about what each option does.
First option
Second option
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac diam fermentum, sagittis erat at, rhoncus ante. Sed vestibulum orci vel efficitur auctor. Donec tempor odio nec felis blandit, ut vulputate ligula tincidunt. Sed finibus varius finibus. Fusce non enim et metus accumsan commodo. Pellentesque auctor arcu eu consectetur tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac diam fermentum, sagittis erat at, rhoncus ante. Sed vestibulum orci vel efficitur auctor. Donec tempor odio nec felis blandit, ut vulputate ligula tincidunt. Sed finibus varius finibus. Fusce non enim et metus accumsan commodo. Pellentesque auctor arcu eu consectetur tincidunt.
Third option
<Accordion divider icon={plusIcon} iconPosition={'end'}>
<Details>...</Details>
<Details>...</Details>
<Details>...</Details>
</Accordion>Expanded state
By default, every detail can be expanded independently.
Use the name prop if only one detail should be open at the same time.
First option
Second option
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac diam fermentum, sagittis erat at, rhoncus ante. Sed vestibulum orci vel efficitur auctor. Donec tempor odio nec felis blandit, ut vulputate ligula tincidunt. Sed finibus varius finibus. Fusce non enim et metus accumsan commodo. Pellentesque auctor arcu eu consectetur tincidunt.
Third option
<Accordion name={'single-select'}>
<Details>...</Details>
<Details>...</Details>
<Details>...</Details>
</Accordion>