Search the design system

Components – legacy

Accordion

Play around with props, edit and copy code.

Properties

Accordion

Prop nameTypeDefault ValueDescription
brandingunion'default'Custom branding. Built in support for default and inverted
customerenum'neutral'Neutral, tur or sport.
isFlatboolfalseFlat accordion - No borders. No shadow.
childrennodeAccordionItems
classNamestringCustom classes

AccordionItem

Prop nameTypeDefault ValueDescription
customerstring'neutral'
childrennodeAccordionSummary and AccordionDetails
classNamestringCustom classes
idstringId, if non is specified a unique id will be generated and used
indexnumberAutogenerated from parent component.
isExpandedboolIf item is expanded.
isFlatboolAutogenerated from parent component.
onChangefuncCallback that runs on click / change.

AccordionSummary

Prop nameTypeDefault ValueDescription
childrennodeContent.
classNamestringCustom classes.
onChangefuncCallback that runs on click / change.
onKeyDownfunc

AccordionDetails

Prop nameTypeDefault ValueDescription
childrennodeContent.
classNamestringCustom classes.
expandedboolSet true to expand accordion details.
hasListGroupboolSet true if accordion details contains a svs-ui list-group.
idstringId, 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.

Read more about WCAG 2.1 AA.

ComponentsAccordion / Usage
ComponentsBadge / Usage

© DesignTech - AB Svenska Spel

What's newTerms of useAccessibility statementCookiesTeams channel [Internal]
@svs/ui version
2.3.0

Feedback

We always want to improve the Design System and would be thrilled to get your feedback.

Please share your wisdom with us.

Microsoft Teams [internal]

Designsystem@svenskaspel.se