Skip to content

role disclosure

Accordion draft v0.1.0

A stack of sections whose content shows and hides under a header people activate.

An accordion stacks sections of content, each behind a header: activating the header shows the section, activating it again hides it. It saves vertical space when people need only one or two sections at a time (settings groups, frequently asked questions, order details). Several sections may be open at once; the component never closes one when another opens. One section alone is the same thing with a single item.

Examples

Shipping and returns

Orders ship within two business days. Returns are free within 30 days.

Payment methods

We accept cards, bank transfers and most digital wallets.

Warranty

Every product is covered for two years from the delivery date.

  • size="medium"
  • items=[{"title":"Shipping and returns","content":"Orders ship within two business days. Returns are free within 30 days.","open":true},{"title":"Payment methods","content":"We accept cards, bank transfers and most digital wallets."},{"title":"Warranty","content":"Every product is covered for two years from the delivery date."}]
Open in playground