Skip to content
Patternfly Logo

Accordion

Examples

Definition list

Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices, faucibus erat id, maximus nunc.

Single expand behavior

Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices, faucibus erat id, maximus nunc.

Fixed with multiple expand behavior

Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.

Props

Accordion

NameTypeRequiredDefaultDescription
aria-labelstringNo''Adds accessible text to the Accordion
asDefinitionListbooleanNotrueFlag to indicate whether use definition list or div
childrenReact.ReactNodeNonullContent rendered inside the Accordion
classNamestringNo''Additional classes added to the Accordion
headingLevel'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'No'h3'Heading level to use

AccordionItem

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Accordion item

AccordionContent

NameTypeRequiredDefaultDescription
aria-labelstringNo''Adds accessible text to the Accordion content
childrenReact.ReactNodeNonullContent rendered inside the Accordion
classNamestringNo''Additional classes added to the Accordion content
componentReact.ElementTypeNoComponent to use as content container
idstringNo''Identify the AccordionContent item
isFixedbooleanNofalseFlag to indicate Accordion content is fixed
isHiddenbooleanNofalseFlag to show if the expanded content of the Accordion item is visible

AccordionToggle

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Accordion toggle
classNamestringNo''Additional classes added to the Accordion Toggle
componentReact.ElementTypeNoContainer to override the default for toggle
idstringYesIdentify the Accordion toggle number
isExpandedbooleanNofalseFlag to show if the expanded content of the Accordion item is visible

CSS variables

.pf-c-accordion--pf-global--Color--100
#151515
.pf-c-accordion--pf-global--Color--200
#6a6e73
.pf-c-accordion--pf-global--BorderColor--100
#d2d2d2
.pf-c-accordion--pf-global--primary-color--100
#06c
.pf-c-accordion--pf-global--link--Color
#06c
.pf-c-accordion--pf-global--link--Color--hover
#004080
.pf-c-accordion--pf-global--BackgroundColor--100
#fff
.pf-c-accordion--pf-c-accordion--BackgroundColor
#fff
.pf-c-accordion--pf-c-accordion__toggle--PaddingTop
0.5rem
.pf-c-accordion--pf-c-accordion__toggle--PaddingRight
1rem
.pf-c-accordion--pf-c-accordion__toggle--PaddingBottom
0.5rem
.pf-c-accordion--pf-c-accordion__toggle--PaddingLeft
1rem
.pf-c-accordion--pf-c-accordion__toggle--before--BackgroundColor
transparent
.pf-c-accordion--pf-c-accordion__toggle--before--Top
0
.pf-c-accordion--pf-c-accordion__toggle--hover--BackgroundColor
#f0f0f0
.pf-c-accordion--pf-c-accordion__toggle--focus--BackgroundColor
#f0f0f0
.pf-c-accordion--pf-c-accordion__toggle--active--BackgroundColor
#f0f0f0
.pf-c-accordion--pf-c-accordion__toggle--before--Width
3px
.pf-c-accordion--pf-c-accordion__toggle--m-expanded--before--BackgroundColor
#06c
.pf-c-accordion--pf-c-accordion__toggle-text--MaxWidth
calc(100% - 1.5rem)
.pf-c-accordion--pf-c-accordion__toggle--hover__toggle-text--Color
#06c
.pf-c-accordion--pf-c-accordion__toggle--active__toggle-text--Color
#06c
.pf-c-accordion--pf-c-accordion__toggle--active__toggle-text--FontWeight
700
.pf-c-accordion--pf-c-accordion__toggle--focus__toggle-text--Color
#06c
.pf-c-accordion--pf-c-accordion__toggle--focus__toggle-text--FontWeight
700
.pf-c-accordion--pf-c-accordion__toggle--m-expanded__toggle-text--Color
#06c
.pf-c-accordion--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight
700
.pf-c-accordion--pf-c-accordion__toggle-icon--Transition
.2s ease-in 0s
.pf-c-accordion--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate
90deg
.pf-c-accordion--pf-c-accordion__expanded-content--Color
#6a6e73
.pf-c-accordion--pf-c-accordion__expanded-content--FontSize
0.875rem
.pf-c-accordion--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor
#06c
.pf-c-accordion--pf-c-accordion__expanded-content--m-fixed--MaxHeight
9.375rem
.pf-c-accordion--pf-c-accordion__expanded-content-body--PaddingTop
0.5rem
.pf-c-accordion--pf-c-accordion__expanded-content-body--PaddingRight
1rem
.pf-c-accordion--pf-c-accordion__expanded-content-body--PaddingBottom
0.5rem
.pf-c-accordion--pf-c-accordion__expanded-content-body--PaddingLeft
1rem
.pf-c-accordion--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop
0
.pf-c-accordion--pf-c-accordion__expanded-content-body--before--BackgroundColor
transparent
.pf-c-accordion--pf-c-accordion__expanded-content-body--before--Width
3px
.pf-c-accordion--pf-c-accordion__expanded-content-body--before--Top
0
.pf-c-accordion--pf-c-accordion--m-display-lg__toggle--PaddingTop
1rem
.pf-c-accordion--pf-c-accordion--m-display-lg__toggle--PaddingRight
1rem
.pf-c-accordion--pf-c-accordion--m-display-lg__toggle--PaddingBottom
1rem
.pf-c-accordion--pf-c-accordion--m-display-lg__toggle--PaddingLeft
1.5rem
.pf-c-accordion--pf-c-accordion--m-display-lg__toggle--FontFamily
'"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif'
.pf-c-accordion--pf-c-accordion--m-display-lg__toggle--FontSize
1.25rem
.pf-c-accordion--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color
#151515
.pf-c-accordion--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color
#151515
.pf-c-accordion--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight
400
.pf-c-accordion--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color
#151515
.pf-c-accordion--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight
400
.pf-c-accordion--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color
#151515
.pf-c-accordion--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight
400
.pf-c-accordion--pf-c-accordion--m-display-lg__expanded-content--FontSize
1rem
.pf-c-accordion--pf-c-accordion--m-display-lg__expanded-content--Color
#151515
.pf-c-accordion--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop
0
.pf-c-accordion--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight
1rem
.pf-c-accordion--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom
1rem
.pf-c-accordion--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom
1.5rem
.pf-c-accordion--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft
1.5rem
.pf-c-accordion--pf-c-accordion--m-bordered--BorderTopWidth
1px
.pf-c-accordion--pf-c-accordion--m-bordered--BorderTopColor
#d2d2d2
.pf-c-accordion--pf-c-accordion--m-bordered__toggle--before--Top
calc(-1 * 1px)
.pf-c-accordion--pf-c-accordion--m-bordered__toggle--after--BorderColor
#d2d2d2
.pf-c-accordion--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth
0
.pf-c-accordion--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth
1px
.pf-c-accordion--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth
1px
.pf-c-accordion--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor
#d2d2d2
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__toggle--PaddingTop
1rem
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__toggle--PaddingRight
1rem
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__toggle--PaddingBottom
1rem
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__toggle--PaddingLeft
1.5rem
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__toggle--FontFamily
'"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif'
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__toggle--FontSize
1.25rem
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__toggle--hover__toggle-text--Color
#151515
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__toggle--active__toggle-text--Color
#151515
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__toggle--active__toggle-text--FontWeight
400
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__toggle--focus__toggle-text--Color
#151515
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__toggle--focus__toggle-text--FontWeight
400
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__toggle--m-expanded__toggle-text--Color
#151515
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight
400
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__expanded-content-body--PaddingTop
0
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__expanded-content-body--PaddingRight
1rem
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__expanded-content-body--PaddingBottom
1rem
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__expanded-content-body--PaddingLeft
1.5rem
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__expanded-content--FontSize
1rem
.pf-c-accordion.pf-m-display-lg--pf-c-accordion__expanded-content--Color
#151515
.pf-c-accordion.pf-m-display-lg .pf-c-accordion__expanded-content-body:last-child--pf-c-accordion__expanded-content-body--PaddingBottom
1.5rem
.pf-c-accordion.pf-m-bordered--pf-c-accordion__toggle--before--Top
calc(-1 * 1px)
.pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle.pf-m-expanded--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth
0
.pf-c-accordion__toggle.pf-m-expanded--pf-c-accordion__toggle--before--BackgroundColor
#06c
.pf-c-accordion__expanded-content.pf-m-expanded--pf-c-accordion__expanded-content-body--before--BackgroundColor
#06c
.pf-c-accordion__expanded-content-body + .pf-c-accordion__expanded-content-body--pf-c-accordion__expanded-content-body--PaddingTop
0

View source on GitHub