Accordion
Collapsible content sections that organize and display information in a space-efficient vertical layout, allowing users to expand and collapse panels to reveal or hide content.
Specs
Design specifications and implementation details for accordion components, defining precise measurements, spacing relationships, and visual properties across different variants and states. These specifications ensure consistent implementation and proper integration within design systems.
Legend:
- Brackets (
[]) denote a component variant placeholder. - Full emphasis indicates a value specific to that variant.
- Dimmed indicates a value unchanged from the default variant.
Accordion Item
Individual collapsible content section specifications that define the precise measurements, spacing relationships, and visual properties for single accordion elements across different size variants and interaction states.
1
Accordion Item
- borderColor:
- color.accordion.border-main
- borderWidthBottom:
- borderWidth.accordion.main
2
Title Frame
- flush:
- false
- open:
- false
- verticalPadding:
- space.accordion.[size]-title-padding-y
- horizontalPadding:
- space.accordion.[size]-title-padding-x
- itemSpacing:
- space.accordion.[size]-gap
- fill:
- color.accordion.title-bg-idle
- flush:
- true
- verticalPadding:
- space.accordion.[size]-title-padding-y
- horizontalPadding:
- none
- itemSpacing:
- space.accordion.[size]-gap
- fill:
- color.accordion.title-bg-idle
- flush:
- true
- verticalPadding:
- space.accordion.[size]-title-padding-y
- horizontalPadding:
- space.accordion.[size]-title-padding-x
- itemSpacing:
- space.accordion.[size]-gap
- fill:
- color.accordion.title-bg-active
3
Body Frame
- flush:
- false
- paddingTop:
- space.accordion.[size]-body-padding-t
- paddingRight:
- space.accordion.[size]-body-padding-e
- paddingBottom:
- space.accordion.[size]-body-padding-b
- paddingLeft:
- space.accordion.[size]-body-padding-s
- itemSpacing:
- space.context.[size]
- fill:
- color.accordion.item-bg-color
- flush:
- true
- paddingTop:
- space.accordion.[size]-body-padding-t
- paddingRight:
- none
- paddingBottom:
- space.accordion.[size]-body-padding-b
- paddingLeft:
- none
- itemSpacing:
- space.context.[size]
- fill:
- color.accordion.item-bg-color
4
Indicator Icon
- open:
- false
- height:
- size.accordion.[size]-indicator
- width:
- size.accordion.[size]-indicator
- fill:
- color.accordion.indicator-idle
- open:
- true
- height:
- size.accordion.[size]-indicator
- width:
- size.accordion.[size]-indicator
- fill:
- color.accordion.indicator-active
5
Title Text
- open:
- false
- fill:
- color.accordion.title-fg-idle
- typography:
- font.accordion.[size]-title
- open:
- true
- fill:
- color.accordion.title-fg-active
- typography:
- font.accordion.[size]-title
6
Body Text
- fill:
- color.accordion.item-fg-color
- typography:
- font.accordion.[size]-body
Accordion
Complete accordion system specifications that define the overall measurements, spacing relationships, and visual coordination for multiple collapsible sections working together as unified content organization elements.
1
Accordion
- flush:
- false
- borderColor:
- color.accordion.border-main
- borderRadius:
- borderRadius.accordion.main
- borderWidth:
- borderWidth.accordion.main
- flush:
- true
- borderColor:
- none
- borderRadius:
- none
- borderWidth:
- none
2
Accordion Item
The first item should not have any top borders.
- borderColor:
- none
- borderWidthTop:
- none