Patternfly Logo

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 properties
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 properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Accordion item
AccordionContent properties
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 properties
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--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-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--Color
#6a6e73
.pf-c-accordion--pf-c-accordion__expanded-content--FontSize
0.875rem
.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--m-expanded__expanded-content-body--before--BackgroundColor
#06c
.pf-c-accordion--pf-c-accordion__expanded-content--m-fixed--MaxHeight
9.375rem
.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

View source on GitHub