Accordion

An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.

AccordionBosons

Collapse
Collapse variant.
type: bool
default: false

Examples

Default accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat molestie turpis, sit amet molestie felis vestibulum et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Mauris augue eros, eleifend sed felis vel, posuere consectetur mauris. Pellentesque sodales, neque at fringilla pellentesque, nisi nisi consequat odio, ut aliquam est neque sit amet orci.

Nullam egestas neque a ipsum congue tristique. Sed erat mauris, fermentum venenatis sodales faucibus, euismod vitae nisi. Nullam tristique purus eget nulla suscipit, ut commodo elit mattis.

1// Example of default accordion
2
3@atoms.Accordion(&atoms.AccordionBosons{Collapse: false}) {
4  // ... accordion items
5}
Collapse accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat molestie turpis, sit amet molestie felis vestibulum et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Mauris augue eros, eleifend sed felis vel, posuere consectetur mauris. Pellentesque sodales, neque at fringilla pellentesque, nisi nisi consequat odio, ut aliquam est neque sit amet orci.

Nullam egestas neque a ipsum congue tristique. Sed erat mauris, fermentum venenatis sodales faucibus, euismod vitae nisi. Nullam tristique purus eget nulla suscipit, ut commodo elit mattis.

1// Example of collapse accordion
2
3@atoms.Accordion(&atoms.AccordionBosons{Collapse: true}) {
4  // ... accordion items
5}

Let's dive deeper and connect!

Hanariu is brought to you by Pay For Done. We specialize in crafting products and services rooted in design systems. Join our community to discuss how we can support you.


© 2024 Pay For Done. All Rights Reserved. Website compliant with W3C validation.