Components
Accordion
Play around with props, edit and copy code.
Properties
Accordion
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| branding | union | 'default' | Custom branding. Built in support for default and inverted |
| customer | enum | 'neutral' | Neutral, tur or sport. |
| isFlat | bool | false | Flat accordion - No borders. No shadow. |
| children | node | AccordionItems | |
| className | string | Custom classes |
AccordionItem
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| customer | string | 'neutral' | |
| children | node | AccordionSummary and AccordionDetails | |
| className | string | Custom classes | |
| id | string | Id, if non is specified a unique id will be generated and used | |
| index | number | Autogenerated from parent component. | |
| isExpanded | bool | If item is expanded. | |
| isFlat | bool | Autogenerated from parent component. | |
| onChange | func | Callback that runs on click / change. |
AccordionSummary
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| children | node | Content. | |
| className | string | Custom classes. | |
| onChange | func | Callback that runs on click / change. | |
| onKeyDown | func |
AccordionDetails
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| children | node | Content. | |
| className | string | Custom classes. | |
| expanded | bool | Set true to expand accordion details. | |
| hasListGroup | bool | Set true if accordion details contains a svs-ui list-group. | |
| id | string | Id, if non is specified a unique id will be generated and used. |
Accessibility
This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.
Feedback
We always want to improve the Design System and would be thrilled to get your feedback.
Please share your wisdom with us.