Patternfly Logo

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.

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>.

Accessibility

Attribute
Applied to
Outcome
aria-expanded="false"
.pf-c-accordion__toggle
Indicates that the expanded content element is hidden. Required
aria-expanded="true"
.pf-c-accordion__toggle
Indicates that the expanded content element is visible. Required
hidden
.pf-c-accordion__expanded-content
Indicates that the expanded content element is hidden. Use with aria-expanded="false" Required
aria-hidden="true"
.pf-c-accordion__toggle-icon
Hides the icon from assistive technologies.Required

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-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--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