Basic data list
Basic data list example
-
Primary contentSecondary content
-
Secondary content (pf-m-no-fill)Secondary content (pf-m-align-right pf-m-no-fill)
Basic data list 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 |
Basic data list 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. |
Data list with headings
Data list with headings example
-
Primary content
Secondary content -
Secondary content (pf-m-no-fill)
Secondary content (pf-m-align-right pf-m-no-fill)
Data list with headings 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.
Data list with checkboxes, actions, and additional cells
Data list with checkboxes, actions, and additional cells example
-
Primary content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.Tertiary Content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.More Content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.More Content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
-
Primary content - lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
-
Primary content - lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Data list with checkboxes, actions, and additional cells 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 |
Data list with checkboxes, actions, and additional cells 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, 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. |
Exandable data list
Expandable data list example
-
Secondary contentLorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Compact expandable data list example
-
Secondary content Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nested expandable data list example
-
Secondary contentLorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Compact data list
Compact data list example
-
Primary content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.Tertiary Content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.More Content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.More Content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
-
Primary content - lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
-
Primary content - lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Compact data list 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 |
Compact data list 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. |
Data list modifiers
Data list flex modifiers example
-
default
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
defaultLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
.pf-m-flex-2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
.pf-m-flex-4Lorem ipsum dolor sit amet.
Data list text modifiers example
-
This text will wrap to the next line because it has the default behavior of the data list cell.This text will truncate because it is very very long.http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.orgThis text will not break or wrap.This text will truncate because it is very very long. This text will truncate because it is very very long.This text will truncate because it is very very long. This text will truncate because it is very very long.This text will truncate because it is very very long. This text will truncate because it is very very long.This text will truncate because it is very very long. This text will truncate because it is very very long.http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.orghttp://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.orghttp://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.orghttp://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.orgThis text will not break or wrap.This text will not break or wrap.This text will not break or wrap.This text will not break or wrap.
Data list modifiers accessibility
Attribute | Applied to | Outcome |
|---|---|---|
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 |
Data list modifiers usage
Class | Applied to | Outcome |
|---|---|---|
.pf-m-flex-{1, 2, 3, 4, 5} | .pf-v6-c-data-list__cell | Percentage based modifier for .pf-v6-c-data-list__cell widths. |
.pf-v6-c-data-list__text | * | Inserts the data list text element. Use this class to modify specific text directly. |
.pf-m-truncate | .pf-v6-c-data-list, .pf-v6-c-data-list__item-row, .pf-v6-c-data-list__cell, .pf-v6-c-data-list__text | Modifies the data list element so that text is truncated. |
.pf-m-break-word | .pf-v6-c-data-list, .pf-v6-c-data-list__item-row, .pf-v6-c-data-list__cell, .pf-v6-c-data-list__text | Modifies the data list element so that text breaks to the next line. |
.pf-m-nowrap | .pf-v6-c-data-list, .pf-v6-c-data-list__item-row, .pf-v6-c-data-list__cell, .pf-v6-c-data-list__text | Modifies the data list element so that text does not wrap to the next line. |
Data list with clickable rows
Data list with clickable rows accessibility
Attribute | Applied to | Outcome |
|---|---|---|
tabindex="0" | .pf-v6-c-data-list__item.pf-m-clickable | Inserts the clickable row into the tab order of the page so that it is focusable. Required |
Data list with clickable rows usage
Class | Applied to | Outcome |
|---|---|---|
.pf-m-clickable | .pf-v6-c-data-list__item | Modifies a data list item so that it is clickable. |
.pf-m-selected | .pf-v6-c-data-list__item | Modifies a data list item for the selected state. |
Draggable data list
Draggable data list example
Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.
-
Draggable icon disabled
-
List item
-
Ghost row
-
List item
This is the aria-live section that provides real-time feedback to the user.
Draggable data list accessibility
Attribute | Applied to | Outcome |
|---|---|---|
aria-pressed="true or false" | .pf-v6-c-data-list__item-draggable-button | Indicates that the button is a toggle. When set to "true", pf-m-active should also be set so that the button displays in an active state. |
aria-live | [element with live text] | Gives screen reader users live feedback about what's happening during interaction with the data list, both during drag and drop interactions and keyboard interactions. Highly Recommended |
aria-describedby="[id value of applicable content]" | .pf-v6-c-data-list__item-draggable-button | Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. The example here uses a <div id="draggable-help"></div>. Highly recommended |
aria-labelledby="[id value of .pf-v6-c-data-list__item-draggable-button] [id value of .pf-v6-c-data-list__cell-text]" | .pf-v6-c-data-list__item-draggable-button | Provides an accessible name for the draggable button. |
id="[]" | .pf-v6-c-data-list__item-draggable-button, .pf-v6-c-data-list__cell-text | Gives the button and the text element accessible IDs |
Draggable data list usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v6-c-data-list__item-draggable-button | <button> | Initiates the draggable button. Use for drag and drop. |
.pf-v6-c-data-list__item-draggable-icon | <span> | Initiates the draggable button icon. |
.pf-m-draggable | .pf-v6-c-data-list__item | Modifies a data list item so that it is draggable. |
.pf-m-ghost-row | .pf-v6-c-data-list__item.pf-m-draggable | Modifies a draggable data list item to be the ghost row. |
.pf-m-disabled | .pf-v6-c-data-list__item.pf-m-draggable | Modifies a data list draggable item for the disabled state. |
.pf-m-drag-over | .pf-v6-c-data-list | Modifies the data list to indicate that a draggable item is being dragged over the data list. |
Plain data list
Plain data list example
-
Primary contentSecondary content
-
Secondary content (pf-m-no-fill)Secondary content (pf-m-align-right pf-m-no-fill)
Plain data list usage
Class | Applied to | Outcome |
|---|---|---|
.pf-m-plain | .pf-v6-c-data-list | Modifies a data list to have a transparent background. |
Data list as grid
Data list as grid example
-
Cell 1Cell 2Cell 3Cell 4Cell 5Cell 6
-
Cell 1Cell 2Cell 3Cell 4Cell 5Cell 6
Data list as grid on small breakpoint example
-
Cell 1Cell 2Cell 3Cell 4Cell 5Cell 6
-
Cell 1Cell 2Cell 3Cell 4Cell 5Cell 6
Data list with no grid
-
Cell 1Cell 2Cell 3Cell 4Cell 5Cell 6
-
Cell 1Cell 2Cell 3Cell 4Cell 5Cell 6
Data list as grid usage
Class | Applied to | Outcome |
|---|---|---|
.pf-m-grid{-[none, sm, md, lg, xl, 2xl]} | .pf-v6-c-data-list | Modifies the data list to switch to a grid layout at a specified breakpoint. .pf-m-grid will display the grid layout at all breakpoints. .pf-m-grid-none will display the desktop layout at all breakpoints. Note: Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |
Documentation
Overview
The DataList component provides a flexible alternative to the Table component, wherein individual data points may or may not exist within each row. DataList relies upon PatternFly layouts to achieve desired presentation within pf-v6-c-data-list__cell elements. DataLists do not have headers. If headers are required, use the table component.
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-data-list | --pf-v6-c-data-list--FontSize | var( --pf-t--global--font--size--body) | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--LineHeight | 1.5 | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--BorderBlockStartColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--BorderBlockStartWidth | 2px | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--sm--BorderBlockStartWidth | 1px | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--sm--BorderBlockStartColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--MarginInlineStart | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item--BackgroundColor | var( --pf-t--global--background--color--primary--default) | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item--hover--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item--m-selected--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item--m-clickable--OutlineOffset | calc(-1 * 0.25rem) | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item--BorderBlockEndColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item--BorderBlockEndWidth | 2px | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item--sm--BorderBlockEndWidth | 1px | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item--sm--BorderBlockEndColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-row--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-row--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-row--xl--PaddingInlineEnd | 1.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-row--xl--PaddingInlineStart | 1.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-content--md--PaddingBlockEnd | 1.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__cell--PaddingBlockStart | 1.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__cell--PaddingBlockEnd | 1.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__cell--MarginInlineEnd | 2rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__cell--md--PaddingBlockEnd | 0 | ||
| .pf-v6-c-data-list | --pf-v6-c-data-list__cell--m-icon--MarginInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__cell--cell--PaddingBlockStart | 0 | ||
| .pf-v6-c-data-list | --pf-v6-c-data-list__cell--cell--md--PaddingBlockStart | 1.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__cell--m-icon--cell--PaddingBlockStart | 1.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--cell--MinWidth | initial | ||
| .pf-v6-c-data-list | --pf-v6-c-data-list--cell--Overflow | visible | ||
| .pf-v6-c-data-list | --pf-v6-c-data-list--cell--TextOverflow | clip | ||
| .pf-v6-c-data-list | --pf-v6-c-data-list--cell--WhiteSpace | normal | ||
| .pf-v6-c-data-list | --pf-v6-c-data-list--cell--WordBreak | normal | ||
| .pf-v6-c-data-list | --pf-v6-c-data-list--cell--m-truncate--MinWidth | 5ch | ||
| .pf-v6-c-data-list | --pf-v6-c-data-list__toggle--MarginInlineStart | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__toggle--MarginBlockStart | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__toggle--MarginBlockEnd | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__toggle-icon--Height | calc(var( --pf-t--global--font--size--body) * 1.5) | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__toggle-icon--TransitionDuration | 100ms | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__toggle-icon--TransitionTimingFunction | cubic-bezier(.4, 0, .2, 1) | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__toggle-icon--Transition | transform 100ms cubic-bezier(.4, 0, .2, 1) | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__toggle-icon--Rotate | 0 | ||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate | 90deg | ||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-draggable-button--BackgroundColor | transparent | ||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-draggable-button--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-draggable-button--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-draggable-button--MarginBlockStart | calc(1.5rem * -1) | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-draggable-button--MarginBlockEnd | calc(1.5rem * -1) | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart | 1.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd | 1.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-draggable-button--MarginInlineStart | calc(1rem * -1) | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-draggable-button-icon--Color | (In light theme) #707070 | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-draggable-button--hover__draggable-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-draggable-button--focus__draggable-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item--m-ghost-row--after--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item--m-ghost-row--after--Opacity | .6 | ||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-control--PaddingBlockStart | 1.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-control--PaddingBlockEnd | 1.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-control--MarginInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-control--md--MarginInlineEnd | 2rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-control--not-last-child--MarginInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__check--Height | calc(var( --pf-t--global--font--size--body) * 1.5) | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__check--MarginBlockStart | -0.0625rem | ||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-action--Display | flex | ||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-action--PaddingBlockStart | 1.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-action--PaddingBlockEnd | 1.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-action--PaddingBlockStart--offset | 0.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-action--PaddingBlockEnd--offset | 0.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-action--MarginInlineStart | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-action--md--MarginInlineStart | 2rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__item-action--Gap | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__expandable-content--BackgroundColor | var( --pf-t--global--background--color--primary--default) | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__expandable-content--MarginBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__expandable-content--MarginInlineStart | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__expandable-content--MarginInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__expandable-content--MaxHeight | 37.5rem | ||
| .pf-v6-c-data-list | --pf-v6-c-data-list__expandable-content-body--PaddingBlockStart | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__expandable-content-body--md--PaddingBlockStart | 1.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineEnd | 1.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__expandable-content-body--md--PaddingBlockEnd | 1.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__expandable-content-body--xl--PaddingInlineStart | 1.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list__expandable-content-body--BorderRadius | 6px | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact--FontSize | 0.75rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact--LineHeight | 1.5 | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__check--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__cell--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__cell--md--PaddingBlockEnd | 0 | ||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart | 0 | ||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__cell-cell--md--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__cell--cell--MarginInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__item-control--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__item-control--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__item-control--MarginInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart--offset | 0.25rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd--offset | 0.25rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__item-action--MarginInlineStart | 1rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart | 0.25rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd | 0.25rem | ||
| ||||
| .pf-v6-c-data-list | --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact | --pf-v6-c-data-list__check--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact | --pf-v6-c-data-list--FontSize | 0.75rem | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact | --pf-v6-c-data-list__item-action--MarginInlineStart | 1rem | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact | --pf-v6-c-data-list__item-action--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact | --pf-v6-c-data-list__item-action--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact | --pf-v6-c-data-list__item-control--MarginInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact | --pf-v6-c-data-list__item-control--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact | --pf-v6-c-data-list__item-control--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact | --pf-v6-c-data-list__item-content--md--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact | --pf-v6-c-data-list__item-draggable-button--MarginBlockStart | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact | --pf-v6-c-data-list__item-draggable-button--MarginBlockEnd | calc(0.5rem * -1) | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact | --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart | 0.25rem | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact | --pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd | 0.25rem | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact | --pf-v6-c-data-list__cell--m-icon--cell--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__cell | --pf-v6-c-data-list__cell--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__cell | --pf-v6-c-data-list__cell--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__cell | --pf-v6-c-data-list__cell--MarginInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__cell | --pf-v6-c-data-list__cell--cell--PaddingBlockStart | 0 | ||
| ||||
| .pf-v6-c-data-list.pf-m-truncate | --pf-v6-c-data-list--cell--MinWidth | 5ch | ||
| ||||
| .pf-v6-c-data-list.pf-m-truncate | --pf-v6-c-data-list--cell--Overflow | hidden | ||
| .pf-v6-c-data-list.pf-m-truncate | --pf-v6-c-data-list--cell--TextOverflow | ellipsis | ||
| .pf-v6-c-data-list.pf-m-truncate | --pf-v6-c-data-list--cell--WhiteSpace | nowrap | ||
| .pf-v6-c-data-list.pf-m-break-word | --pf-v6-c-data-list--cell--WordBreak | break-word | ||
| .pf-v6-c-data-list.pf-m-nowrap | --pf-v6-c-data-list--cell--WhiteSpace | nowrap | ||
| .pf-v6-c-data-list__item.pf-m-expanded | --pf-v6-c-data-list__toggle-icon--Rotate | 90deg | ||
| ||||
| .pf-v6-c-data-list__item-draggable-button:hover | --pf-v6-c-data-list__item-draggable-button-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-data-list__item-draggable-button:focus | --pf-v6-c-data-list__item-draggable-button-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-data-list__item-draggable-button.pf-m-disabled | --pf-v6-c-data-list__item-draggable-button-icon--Color | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-data-list__item-action | --pf-v6-hidden-visible--visible--Display | flex | ||
| ||||
| .pf-v6-c-data-list__item-action | --pf-v6-hidden-visible--hidden--Display | none | ||
| .pf-v6-c-data-list__item-action | --pf-v6-hidden-visible--Display | flex | ||
| ||||
| .pf-v6-c-data-list__item-action.pf-m-hidden | --pf-v6-hidden-visible--Display | none | ||
| ||||
| .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body .pf-v6-c-data-list__item-row | --pf-v6-c-data-list__item-row--PaddingInlineStart | 0 | ||
| .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body .pf-v6-c-data-list__expandable-content-body | --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart | 0 | ||
