Skip to content
PatternFly logo

Accordion

Examples

Fluid

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fixed

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Definition list

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bordered

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Large bordered

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Documentation

Overview

There are two variations to build the accordion component: One way uses <div> and <h1 - h6> tags to build the component. In these examples .pf-c-accordion uses <div>, .pf-c-accordion__toggle uses <h3><button>, and .pf-c-accordion__expanded-content uses <div>. The heading level that you use should fit within the rest of the headings outlined on your page.

Another variation is using the definition list: In these examples .pf-c-accordion uses <dl>, .pf-c-accordion__toggle uses <dt><button>, and .pf-c-accordion__expanded-content uses <dd>.

Usage

Class
Applied to
Outcome
.pf-c-accordion
<div>, <dl>
Initiates an accordion component. Required
.pf-c-accordion__toggle
<h1-h6><button>, <dt><button>
Initiates a toggle in the accordion. Required
.pf-c-accordion__toggle-text
<span>
Initiates the text inside the toggle. Required
.pf-c-accordion__toggle-icon
<span>
Initiates the toggle icon wrapper. Required
.pf-c-accordion__expanded-content
<div>, <dd>
Initiates expanded content. Must be paired with a button
.pf-c-accordion__expanded-content-body
<div>
Initiates expanded content body. Required
.pf-m-bordered
.pf-c-accordion
Modifies the accordion to add borders between items.
.pf-m-display-lg
.pf-c-accordion
Modifies the accordion for large display styling. This variation is for marketing/web use cases.
.pf-m-expanded
.pf-c-accordion__toggle, .pf-c-accordion__expanded-content
Modifies the accordion button and expanded content for the expanded state.
.pf-m-fixed
.pf-c-accordion__expanded-content
Modifies the expanded content for the fixed state.

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