@patternfly/patternfly

--- id: Data list section: components cssPrefix: pf-v6-c-data-list ---## Examples ### Basic ```html <ul class="pf-v6-c-data-list" role="list" aria-label="Basic data list example" id="data-list-basic" > <li class="pf-v6-c-data-list__item"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell"> <span id="data-list-basic-item-1">Primary content</span> </div> <div class="pf-v6-c-data-list__cell">Secondary content</div> </div> </div> </li> <li class="pf-v6-c-data-list__item"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell pf-m-no-fill"> <span id="data-list-basic-item-2">Secondary content (pf-m-no-fill)</span> </div> <div class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right" >Secondary content (pf-m-align-right pf-m-no-fill)</div> </div> </div> </li> </ul> ``` ### Accessibility | Attribute | Applied to | Outcome | | -- | -- | -- | | `role="list"` | `.pf-v6-c-data-list` | Indicates that the data list is a list. **Required** | | `aria-label` | `.pf-v6-c-data-list` | Provides an accessible name for the data list. **Required** | | `aria-labelledby` | `.pf-v6-c-data-list__item` | Provides an accessible description for data list item. **Required** | | `id` | `.pf-v6-c-data-list__cell`, `.pf-v6-c-data-list__cell *` | Provides a reference for data list item description. **Required** | ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v6-c-data-list` | `<ul>` | Initiates a data list. **Required** | | `.pf-v6-c-data-list__item` | `<li>` | Initiates a data list item. **Required** | | `.pf-v6-c-data-list__item-row` | `<div>` | Initiates a data list item row. **Required** | | `.pf-v6-c-data-list__item-content` | `<div>` | Initiates a container for data list content. **Required**| | `.pf-v6-c-data-list__cell` | `*` | Initiates a data list content cell. **Required** | | `.pf-v6-c-data-list__cell-text` | `<span>` | Initiates a data list content cell text element. | | `.pf-m-align-left` | `.pf-v6-c-data-list__cell` | Modifies a data list cell to not grow and align-left when its the first data-list\_\_cell element. | | `.pf-m-no-fill` | `.pf-v6-c-data-list__cell` | Modifies a data list cell to not fill the available horizontal space. | | `.pf-m-align-right` | `.pf-v6-c-data-list__cell` | Modifies a data list cell to align-right. | ### With headings ```html <ul class="pf-v6-c-data-list" role="list" aria-label="With headings data list example" id="data-list-with-headings" > <li class="pf-v6-c-data-list__item"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell"> <h2 id="data-list-with-headings-item-1">Primary content</h2> </div> <div class="pf-v6-c-data-list__cell">Secondary content</div> </div> </div> </li> <li class="pf-v6-c-data-list__item"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell pf-m-no-fill"> <h2 id="data-list-with-headings-item-2" >Secondary content (pf-m-no-fill)</h2> </div> <div class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right" >Secondary content (pf-m-align-right pf-m-no-fill)</div> </div> </div> </li> </ul> ``` ### Usage When a list item includes more than one block of content, it can be difficult for some screen reader users to discern where one list item ends and the next one begins. A simple way to provide better separation of list items is to define the primary content section as a heading. Headings are useful for indicating a new section of contents, but also provide an easy way for screen reader users to navigate to specific sections on the page. The heading level should be based on the context in which the DataList component is being used. For example, if the heading for the section that contains the DataList is a level 3, then `h4` elements should be used in the DataList list items. ### Checkboxes, actions, and additional cells ```html <ul class="pf-v6-c-data-list" role="list" aria-label="Checkbox and action data list example" id="data-list-checkboxes-actions-addl-cells" > <li class="pf-v6-c-data-list__item"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__check"> <label class="pf-v6-c-check pf-m-standalone" for="data-list-checkboxes-actions-addl-cells-item-1"-input" > <input class="pf-v6-c-check__input" type="checkbox" id="data-list-checkboxes-actions-addl-cells-item-1"-input" name="data-list-checkboxes-actions-addl-cells-item-1"-input" aria-label="Standalone check" /> </label> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell"> <span id="data-list-checkboxes-actions-addl-cells-item-1" >Primary content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </div> <div class="pf-v6-c-data-list__cell" >Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</div> <div class="pf-v6-c-data-list__cell"> <span>Tertiary Content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </div> <div class="pf-v6-c-data-list__cell"> <span>More Content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </div> <div class="pf-v6-c-data-list__cell"> <span>More Content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </div> </div> <div class="pf-v6-c-data-list__item-action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Data list item menu toggle" id="data-list-checkboxes-actions-addl-cells-item-1-menu-toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> </div> </li> <li class="pf-v6-c-data-list__item"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__check"> <label class="pf-v6-c-check pf-m-standalone" for="data-list-checkboxes-actions-addl-cells-item-2"-input" > <input class="pf-v6-c-check__input" type="checkbox" id="data-list-checkboxes-actions-addl-cells-item-2"-input" name="data-list-checkboxes-actions-addl-cells-item-2"-input" aria-label="Standalone check" /> </label> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell"> <span id="data-list-checkboxes-actions-addl-cells-item-2" >Primary content - lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </div> <div class="pf-v6-c-data-list__cell" >Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</div> </div> <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Data list item menu toggle" id="data-list-checkboxes-actions-addl-cells-item-2-menu-toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> <div class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-lg" > <button class="pf-v6-c-button pf-m-primary" type="button"> <span class="pf-v6-c-button__text">Primary</span> </button> <button class="pf-v6-c-button pf-m-secondary" type="button"> <span class="pf-v6-c-button__text">Secondary</span> </button> </div> </div> </li> <li class="pf-v6-c-data-list__item"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__check"> <label class="pf-v6-c-check pf-m-standalone" for="data-list-checkboxes-actions-addl-cells-item-3"-input" > <input class="pf-v6-c-check__input" type="checkbox" id="data-list-checkboxes-actions-addl-cells-item-3"-input" name="data-list-checkboxes-actions-addl-cells-item-3"-input" aria-label="Standalone check" /> </label> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell"> <span id="data-list-checkboxes-actions-addl-cells-item-3" >Primary content - lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </div> <div class="pf-v6-c-data-list__cell" >Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</div> </div> <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Data list item menu toggle" id="data-list-checkboxes-actions-addl-cells-item-3-menu-toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> <div class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-xl" > <button class="pf-v6-c-button pf-m-primary" type="button"> <span class="pf-v6-c-button__text">Primary</span> </button> <button class="pf-v6-c-button pf-m-secondary" type="button"> <span class="pf-v6-c-button__text">Secondary</span> </button> <button class="pf-v6-c-button pf-m-secondary" type="button"> <span class="pf-v6-c-button__text">Secondary</span> </button> <button class="pf-v6-c-button pf-m-secondary" type="button"> <span class="pf-v6-c-button__text">Secondary</span> </button> </div> </div> </li> </ul> ``` ### Accessibility | Attribute | Applied to | Outcome | | -- | -- | -- | | `aria-label="[descriptive text]"` | `.pf-v6-c-data-list__action` > `.pf-v6-c-button` | Provides an accessible label buttons. **Required** | | `aria-labelledby="{title_cell_id}"` | `.pf-v6-c-data-list__check` > `.pf-v6-c-check__input` | Creates an accessible label for the checkbox based on the title cell. **Required** | | `aria-labelledby="{title_cell_id} {data_list_action_id}"` | `.pf-v6-c-data-list__action` > `.pf-v6-c-button` | Creates an accessible label for the action button using the title cell and button label **Required** | | `id` | `.pf-v6-c-data-list__cell > *`, `.pf-v6-c-data-list__check` > `.pf-v6-c-check__input`, `.pf-v6-c-data-list__action` > `.pf-v6-c-button` | Provides a reference for interactive elements. **Required** | ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v6-c-data-list__item-control` | `<div>` | Initiates a container for data list controls. For example, add `.pf-v6-c-data-list__check` here. **Required** | | `.pf-v6-c-data-list__item-action` | `<div>` | Initiates a container for the data list actions. For example, add `.pf-v6-c-data-list__action` here. **Required** | | `.pf-v6-c-data-list__check` | `<div>` | Initiates a data list check cell. **Required** | | `.pf-v6-c-data-list__action` | `<div>` | Initiates a data list action button cell. **Required** | | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/tokens/all-patternfly-tokens), or hides it at all breakpoints with `.pf-m-hidden`. | | `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/tokens/all-patternfly-tokens). | ### Expandable ```html <ul class="pf-v6-c-data-list" role="list" aria-label="Expandable data list example" id="data-list-expandable" > <li class="pf-v6-c-data-list__item pf-m-expanded"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__toggle"> <button class="pf-v6-c-button pf-m-plain" type="button" aria-labelledby="data-list-expandable-toggle1 data-list-expandable-item-1" id="data-list-expandable-toggle1" aria-label="Toggle details for" aria-expanded="true" aria-controls="data-list-expandable-content1" > <span class="pf-v6-c-button__icon pf-m-start"> <div class="pf-v6-c-data-list__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </span> </button> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell pf-m-icon"> <i class="fas fa-code-branch" aria-hidden="true"></i> </div> <div class="pf-v6-c-data-list__cell"> <span id="data-list-expandable-item-1">Primary content</span> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> <a href="#">link</a> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> </div> <div class="pf-v6-c-data-list__item-action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Data list item menu toggle" id="data-list-expandable-item-1-menu-toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> </div> <section class="pf-v6-c-data-list__expandable-content" id="data-list-expandable-content1" aria-label="Expandable primary content details" > <div class="pf-v6-c-data-list__expandable-content-body" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </section> </li> <li class="pf-v6-c-data-list__item"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__toggle"> <button class="pf-v6-c-button pf-m-plain" type="button" aria-labelledby="data-list-expandable-toggle2 data-list-expandable-item-2" id="data-list-expandable-toggle2" aria-label="Toggle details for" aria-expanded="false" aria-controls="data-list-expandable-content2" > <span class="pf-v6-c-button__icon pf-m-start"> <div class="pf-v6-c-data-list__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </span> </button> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell"> <div id="data-list-expandable-item-2">Secondary content</div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> </div> <div class="pf-v6-c-data-list__item-action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Data list item menu toggle" id="data-list-expandable-item-2-menu-toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> </div> <section class="pf-v6-c-data-list__expandable-content" id="data-list-expandable-content2" aria-label="Expandable secondary content details" hidden > <div class="pf-v6-c-data-list__expandable-content-body" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </section> </li> <li class="pf-v6-c-data-list__item pf-m-expanded"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__toggle"> <button class="pf-v6-c-button pf-m-plain" type="button" aria-labelledby="data-list-expandable-toggle3 data-list-expandable-item-3" id="data-list-expandable-toggle3" aria-label="Toggle details for" aria-expanded="true" aria-controls="data-list-expandable-content3" > <span class="pf-v6-c-button__icon pf-m-start"> <div class="pf-v6-c-data-list__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </span> </button> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell pf-m-icon"> <i class="fas fa-code-branch" aria-hidden="true"></i> </div> <div class="pf-v6-c-data-list__cell"> <div id="data-list-expandable-item-3">Tertiary content</div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> </div> <div class="pf-v6-c-data-list__item-action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Data list item menu toggle" id="data-list-expandable-item-3-menu-toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> </div> <section class="pf-v6-c-data-list__expandable-content" id="data-list-expandable-content3" aria-label="Expandable tertiary content details" > <div class="pf-v6-c-data-list__expandable-content-body pf-m-no-padding" >This expanded section has no padding.</div> </section> </li> </ul> ``` ### Expandable compact ```html <ul class="pf-v6-c-data-list pf-m-compact" role="list" aria-label="Expandable data list example" id="data-list-expandable-compact" > <li class="pf-v6-c-data-list__item pf-m-expanded"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__toggle"> <button class="pf-v6-c-button pf-m-plain" type="button" aria-labelledby="data-list-expandable-compact-toggle1 data-list-expandable-compact-item-1" id="data-list-expandable-compact-toggle1" aria-label="Toggle details for" aria-expanded="true" aria-controls="data-list-expandable-compact-content1" > <span class="pf-v6-c-button__icon pf-m-start"> <div class="pf-v6-c-data-list__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </span> </button> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell pf-m-icon"> <i class="fas fa-code-branch" aria-hidden="true"></i> </div> <div class="pf-v6-c-data-list__cell"> <div id="data-list-expandable-compact-item-1">Primary content</div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> <a href="#">link</a> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> </div> <div class="pf-v6-c-data-list__item-action"> <button class="pf-v6-c-menu-toggle pf-m-small pf-m-plain" type="button" aria-expanded="false" aria-label="Data list item menu toggle" id="data-list-expandable-compact-item-1-menu-toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> </div> <section class="pf-v6-c-data-list__expandable-content" id="data-list-expandable-compact-content1" aria-label="Expandable compact primary content details" > <div class="pf-v6-c-data-list__expandable-content-body" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </section> </li> <li class="pf-v6-c-data-list__item"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__toggle"> <button class="pf-v6-c-button pf-m-plain" type="button" aria-labelledby="data-list-expandable-compact-toggle2 data-list-expandable-compact-item-2" id="data-list-expandable-compact-toggle2" aria-label="Toggle details for" aria-expanded="false" aria-controls="data-list-expandable-compact-content2" > <span class="pf-v6-c-button__icon pf-m-start"> <div class="pf-v6-c-data-list__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </span> </button> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell pf-m-icon"> <i class="fas fa-code-branch" aria-hidden="true"></i> </div> <div class="pf-v6-c-data-list__cell"> <span id="data-list-expandable-compact-item-2">Secondary content</span> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> </div> <div class="pf-v6-c-data-list__item-action"> <button class="pf-v6-c-menu-toggle pf-m-small pf-m-plain" type="button" aria-expanded="false" aria-label="Data list item menu toggle" id="data-list-expandable-compact-item-2-menu-toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> </div> <section class="pf-v6-c-data-list__expandable-content" id="data-list-expandable-compact-content2" aria-label="Expandable compact secondary content details" hidden > <div class="pf-v6-c-data-list__expandable-content-body" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </section> </li> <li class="pf-v6-c-data-list__item pf-m-expanded"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__toggle"> <button class="pf-v6-c-button pf-m-plain" type="button" aria-labelledby="data-list-expandable-compact-toggle3 data-list-expandable-compact-item-3" id="data-list-expandable-compact-toggle3" aria-label="Toggle details for" aria-expanded="true" aria-controls="data-list-expandable-compact-content3" > <span class="pf-v6-c-button__icon pf-m-start"> <div class="pf-v6-c-data-list__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </span> </button> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell pf-m-icon"> <i class="fas fa-code-branch" aria-hidden="true"></i> </div> <div class="pf-v6-c-data-list__cell"> <span id="data-list-expandable-compact-item-3">Tertiary content</span> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> </div> <div class="pf-v6-c-data-list__item-action"> <button class="pf-v6-c-menu-toggle pf-m-small pf-m-plain" type="button" aria-expanded="false" aria-label="Data list item menu toggle" id="data-list-expandable-compact-item-3-menu-toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> </div> <section class="pf-v6-c-data-list__expandable-content" id="data-list-expandable-compact-content3" aria-label="Expandable compact tertiary content details" > <div class="pf-v6-c-data-list__expandable-content-body pf-m-no-padding" >This expanded section has no padding.</div> </section> </li> </ul> ``` ### Expandable nested ```html <ul class="pf-v6-c-data-list" role="list" aria-label="Expandable nested data list example" id="data-list-expandable-nested" > <li class="pf-v6-c-data-list__item pf-m-expanded"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__toggle"> <button class="pf-v6-c-button pf-m-plain" type="button" aria-labelledby="data-list-expandable-nested-toggle1 data-list-expandable-nested-item-1" id="data-list-expandable-nested-toggle1" aria-label="Toggle details for" aria-expanded="true" aria-controls="data-list-expandable-nested-content1" > <span class="pf-v6-c-button__icon pf-m-start"> <div class="pf-v6-c-data-list__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </span> </button> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell pf-m-icon"> <i class="fas fa-code-branch" aria-hidden="true"></i> </div> <div class="pf-v6-c-data-list__cell"> <span id="data-list-expandable-nested-item-1">Primary content</span> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> <a href="#">link</a> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> </div> <div class="pf-v6-c-data-list__item-action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Data list item menu toggle" id="data-list-expandable-nested-item-1-menu-toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> </div> <section class="pf-v6-c-data-list__expandable-content" id="data-list-expandable-nested-content1" aria-label="Expandable nested primary content details" > <div class="pf-v6-c-data-list__expandable-content-body"> <ul class="pf-v6-c-data-list" role="list" aria-label="Expandable nested nested data list example" id="data-list-expandable-nested-nested" > <li class="pf-v6-c-data-list__item pf-m-expanded"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__toggle"> <button class="pf-v6-c-button pf-m-plain" type="button" aria-labelledby="data-list-expandable-nested-nested-toggle1 data-list-expandable-nested-nested-item-1" id="data-list-expandable-nested-nested-toggle1" aria-label="Toggle details for" aria-expanded="true" aria-controls="data-list-expandable-nested-nested-content1" > <span class="pf-v6-c-button__icon pf-m-start"> <div class="pf-v6-c-data-list__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </span> </button> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell"> <span id="data-list-expandable-nested-nested-item-1" >Nested row 1</span> </div> </div> </div> <section class="pf-v6-c-data-list__expandable-content" id="data-list-expandable-nested-nested-content1" aria-label="Nested row 1 details" > <div class="pf-v6-c-data-list__expandable-content-body" >Nested row 1 expanded content.</div> </section> </li> <li class="pf-v6-c-data-list__item"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__toggle"> <button class="pf-v6-c-button pf-m-plain" type="button" aria-labelledby="data-list-expandable-nested-nested-toggle2 data-list-expandable-nested-nested-item-2" id="data-list-expandable-nested-nested-toggle2" aria-label="Toggle details for" aria-expanded="false" aria-controls="data-list-expandable-nested-nested-content2" > <span class="pf-v6-c-button__icon pf-m-start"> <div class="pf-v6-c-data-list__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </span> </button> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell"> <div id="data-list-expandable-nested-nested-item-2" >Nested row 2</div> </div> </div> </div> <section class="pf-v6-c-data-list__expandable-content" id="data-list-expandable-nested-nested-content2" aria-label="Nested row 2 details" hidden > <div class="pf-v6-c-data-list__expandable-content-body" >Nested row 2 expanded content.</div> </section> </li> <li class="pf-v6-c-data-list__item pf-m-expanded"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__toggle"> <button class="pf-v6-c-button pf-m-plain" type="button" aria-labelledby="data-list-expandable-nested-nested-toggle3 data-list-expandable-nested-nested-item-3" id="data-list-expandable-nested-nested-toggle3" aria-label="Toggle details for" aria-expanded="true" aria-controls="data-list-expandable-nested-nested-content3" > <span class="pf-v6-c-button__icon pf-m-start"> <div class="pf-v6-c-data-list__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </span> </button> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell"> <div id="data-list-expandable-nested-nested-item-3" >Nested row 3</div> </div> </div> </div> <section class="pf-v6-c-data-list__expandable-content" id="data-list-expandable-nested-nested-content3" aria-label="Nested row 3 details" > <div class="pf-v6-c-data-list__expandable-content-body" >Nested row 3 expanded content.</div> </section> </li> </ul> </div> </section> </li> <li class="pf-v6-c-data-list__item"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__toggle"> <button class="pf-v6-c-button pf-m-plain" type="button" aria-labelledby="data-list-expandable-nested-toggle2 data-list-expandable-nested-item-2" id="data-list-expandable-nested-toggle2" aria-label="Toggle details for" aria-expanded="false" aria-controls="data-list-expandable-nested-content2" > <span class="pf-v6-c-button__icon pf-m-start"> <div class="pf-v6-c-data-list__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </span> </button> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell"> <div id="data-list-expandable-nested-item-2">Secondary content</div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> </div> <div class="pf-v6-c-data-list__item-action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Data list item menu toggle" id="data-list-expandable-nested-item-2-menu-toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> </div> <section class="pf-v6-c-data-list__expandable-content" id="data-list-expandable-nested-content2" aria-label="Expandable nested secondary content details" hidden > <div class="pf-v6-c-data-list__expandable-content-body" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </section> </li> <li class="pf-v6-c-data-list__item pf-m-expanded"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__toggle"> <button class="pf-v6-c-button pf-m-plain" type="button" aria-labelledby="data-list-expandable-nested-toggle3 data-list-expandable-nested-item-3" id="data-list-expandable-nested-toggle3" aria-label="Toggle details for" aria-expanded="true" aria-controls="data-list-expandable-nested-content3" > <span class="pf-v6-c-button__icon pf-m-start"> <div class="pf-v6-c-data-list__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </span> </button> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell pf-m-icon"> <i class="fas fa-code-branch" aria-hidden="true"></i> </div> <div class="pf-v6-c-data-list__cell"> <div id="data-list-expandable-nested-item-3">Tertiary content</div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="pf-v6-c-data-list__cell"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </div> </div> <div class="pf-v6-c-data-list__item-action"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Data list item menu toggle" id="data-list-expandable-nested-item-3-menu-toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> </div> <section class="pf-v6-c-data-list__expandable-content" id="data-list-expandable-nested-content3" aria-label="Expandable nested tertiary content details" > <div class="pf-v6-c-data-list__expandable-content-body pf-m-no-padding" >This expanded section has no padding.</div> </section> </li> </ul> ``` ### Compact ```html <ul class="pf-v6-c-data-list pf-m-compact pf-m-grid-sm" role="list" aria-label="Compact data list example" id="data-list-compact" > <li class="pf-v6-c-data-list__item"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__check"> <label class="pf-v6-c-check pf-m-standalone" for="data-list-compact-item-1"-input" > <input class="pf-v6-c-check__input" type="checkbox" id="data-list-compact-item-1"-input" name="data-list-compact-item-1"-input" aria-label="Standalone check" /> </label> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell"> <span id="data-list-compact-item-1">Primary content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </div> <div class="pf-v6-c-data-list__cell" >Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</div> <div class="pf-v6-c-data-list__cell"> <span>Tertiary Content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </div> <div class="pf-v6-c-data-list__cell"> <span>More Content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </div> <div class="pf-v6-c-data-list__cell"> <span>More Content</span> Dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </div> </div> <div class="pf-v6-c-data-list__item-action"> <button class="pf-v6-c-menu-toggle pf-m-small pf-m-plain" type="button" aria-expanded="false" aria-label="Data list item menu toggle" id="data-list-compact-item-1-menu-toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> </div> </li> <li class="pf-v6-c-data-list__item"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__check"> <label class="pf-v6-c-check pf-m-standalone" for="data-list-compact-item-2"-input" > <input class="pf-v6-c-check__input" type="checkbox" id="data-list-compact-item-2"-input" name="data-list-compact-item-2"-input" aria-label="Standalone check" /> </label> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell"> <span id="data-list-compact-item-2">Primary content - lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </div> <div class="pf-v6-c-data-list__cell" >Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</div> </div> <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg"> <button class="pf-v6-c-menu-toggle pf-m-small pf-m-plain" type="button" aria-expanded="false" aria-label="Data list item menu toggle" id="data-list-compact-item-2-menu-toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> <div class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-lg" > <button class="pf-v6-c-button pf-m-small pf-m-primary" type="button"> <span class="pf-v6-c-button__text">Primary</span> </button> <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button"> <span class="pf-v6-c-button__text">Secondary</span> </button> </div> </div> </li> <li class="pf-v6-c-data-list__item"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__check"> <label class="pf-v6-c-check pf-m-standalone" for="data-list-compact-item-3"-input" > <input class="pf-v6-c-check__input" type="checkbox" id="data-list-compact-item-3"-input" name="data-list-compact-item-3"-input" aria-label="Standalone check" /> </label> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell"> <span id="data-list-compact-item-3">Primary content - lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod. </div> <div class="pf-v6-c-data-list__cell" >Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</div> </div> <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-xl"> <button class="pf-v6-c-menu-toggle pf-m-small pf-m-plain" type="button" aria-expanded="false" aria-label="Data list item menu toggle" id="data-list-compact-item-3-menu-toggle" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> <div class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-xl" > <button class="pf-v6-c-button pf-m-small pf-m-primary" type="button"> <span class="pf-v6-c-button__text">Primary</span> </button> <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button"> <span class="pf-v6-c-button__text">Secondary</span> </button> <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button"> <span class="pf-v6-c-button__text">Secondary</span> </button> <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button"> <span class="pf-v6-c-button__text">Secondary</span> </button> </div> </div> </li> </ul> ``` ### Accessibility | Attribute | Applied to | Outcome | | -- | -- | -- | | `aria-expanded="true"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button` | Indicates that the expandable content is visible. **Required**| | `hidden` | `.pf-v6-c-data-list__expandable-content` | Indicates that the expandable content is hidden. **Required**| | `aria-label="[descriptive text]"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button` | Provides an accessible name for toggle button. **Required**| | `aria-labelledby="{title_cell_id} {button_id}"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button` | Establishes relationship between aria-label text and toggle button. **Required** | `id="{button_id}"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button` | Provides a reference for toggle button description. **Required** | | `aria-controls="[id of element controlled]"` | `.pf-v6-c-data-list__toggle` > `.pf-v6-c-button` | Identifies the section controlled by the toggle button. **Required** | ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v6-c-data-list__item-control` | `<div>` | Initiates a container for data list controls. For example, add `.pf-v6-c-data-list__toggle` here. **Required** | | `.pf-v6-c-data-list__toggle` | `<div>` | Initiates a toggle button. | | `.pf-v6-c-data-list__toggle-icon` | `<span>` | Initiates a toggle icon. | | `.pf-v6-c-data-list__expandable-content` | `<div>` | Initiates an expandable content container. | | `.pf-v6-c-data-list__expandable-content-body` | `<div>` | Initiates an expandable content container body. **Required** when `.pf-v6-c-data-list__expandable-content` is used. | | `.pf-m-expanded` | `.pf-v6-c-data-list__item` | Modifies for expanded state. | | `.pf-m-compact` | `.pf-v6-c-data-list` | Modifies for compact variation. | | `.pf-m-no-padding` | `.pf-v6-c-data-list__expandable-content-body` | Removes padding for the expandable content body. | | `.pf-m-icon` | `.pf-v6-c-data-list__cell` | Modifies a data list cell to not grow and align-left when its the first data-list\_\_cell element. | ### Modifiers ```html <h2 class="Preview__section-title">Default fitting - example 1</h2> <ul class="pf-v6-c-data-list" role="list" aria-label="Width modifier data list example 1" id="data-list-default-fitting" > <li class="pf-v6-c-data-list__item"> <div class="pf-v6-c-data-list__item-row"> <div class="pf-v6-c-data-list__item-control"> <div class="pf-v6-c-data-list__check"> <label class="pf-v6-c-check pf-m-standalone" for="data-list-default-fitting-item-1"-input" > <input class="pf-v6-c-check__input" type="checkbox" id="data-list-default-fitting-item-1"-input" name="data-list-default-fitting-item-1"-input" aria-label="Standalone check" /> </label> </div> </div> <div class="pf-v6-c-data-list__item-content"> <div class="pf-v6-c-data-list__cell"> <div class="Preview__placeholder"> <b id="data-list-default-fitting-item-1">default</b> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="pf-v6-c-data-list__cell"> <div