Data list

A data list is used to display large data sets when you need a flexible layout or need to include interactive content like charts. Related design guidelines: Lists and tables

Examples Props CSS Variables

Examples

Basic

Primary content
Secondary content
Secondary content (pf-m-no-fill)
Secondary content (pf-m-align-right pf-m-no-fill)

Compact

Primary content
Secondary content
Secondary content (pf-m-no-fill)
Secondary content (pf-m-align-right pf-m-no-fill)

Checkboxes, actions and additional cells

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.

Actions: single and multiple

Single actionable Primary content
Single actionable Secondary content
Multi actions Primary content
Multi actions Secondary content

Expandable

Primary content
Lorem ipsum dolor sit amet, consectetur adipiscing elit.link
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Secondary content
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Tertiary content
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This expanded section has no padding.

Width modifiers

Default fitting - example 1

default
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
default
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Flex modifiers - example 2

width 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
width 4
Lorem ipsum dolor sit amet.

Flex modifiers - example 3

width 5
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
width 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
default
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Selectable rows

Single actionable Primary content
Single actionable Secondary content
Selectable actions Primary content
Selectable actions Secondary content

Props

DataList properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null
className	string	No	''
aria-label	string	Yes
onSelectDataListItem	(id: string) => void	No
selectedDataListItemId	string	No	''
isCompact	boolean	No	false	Flag indicating if DataList should have compact styling

DataListAction properties
Name	Type	Required	Default	Description
children	React.ReactNode	Yes		Content rendered as DataList Action (e.g <Button> or <Dropdown>)
className	string	No	''	Additional classes added to the DataList Action
id	string	Yes		Identify the DataList toggle number
aria-labelledby	string	Yes		Adds accessible text to the DataList Action
aria-label	string	Yes		Adds accessible text to the DataList Action

DataListCell properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the DataList cell
className	string	No	''	Additional classes added to the DataList cell
width	1 \| 2 \| 3 \| 4 \| 5	No	1	Width (from 1-5) to the DataList cell
isFilled	boolean	No	true	Enables the body Content to fill the height of the card
alignRight	boolean	No	false	Aligns the cell content to the right of its parent.
isIcon	boolean	No	false	Set to true if the cell content is an Icon

DataListCheck properties
Name	Type	Required	Default	Description
className	string	No	''	Additional classes added to the DataList item checkbox
isValid	boolean	No	true	Flag to show if the DataList checkbox selection is valid or invalid
isDisabled	boolean	No	false	Flag to show if the DataList checkbox is disabled
isChecked	boolean	No	null	Flag to show if the DataList checkbox is checked
checked	boolean	No	null	Alternate Flag to show if the DataList checkbox is checked
onChange	(checked: boolean, event: React.FormEvent<HTMLInputElement>) => void	No	(checked: boolean, event: React.FormEvent<HTMLInputElement>) => {}	A callback for when the DataList checkbox selection changes
aria-labelledby	string	Yes		Aria-labelledby of the DataList checkbox

DataListItem properties
Name	Type	Required	Default	Description
isExpanded	boolean	No	false	Flag to show if the expanded content of the DataList item is visible
children	React.ReactNode	Yes		Content rendered inside the DataList item
className	string	No	''	Additional classes added to the DataList item should be either <DataListItemRow> or <DataListContent>
aria-labelledby	string	Yes		Adds accessible text to the DataList item
id	string	No	''	Unique id for the DataList item

DataListItemCells properties
Name	Type	Required	Default	Description
className	string	No	''	Additional classes added to the DataList item Content Wrapper. Children should be one ore more <DataListCell> nodes
dataListCells	React.ReactNode	No		Array of <DataListCell> nodes that are rendered one after the other.
rowid	string	No	''	Id for the row

DataListItemRow properties
Name	Type	Required	Default
children	React.ReactNode	Yes
className	string	No	''
rowid	string	No	''

DataListToggle properties
Name	Type	Required	Default	Description
className	string	No	''	Additional classes added to the DataList cell
isExpanded	boolean	No	false	Flag to show if the expanded content of the DataList item is visible
id	string	Yes		Identify the DataList toggle number
rowid	string	No	''	Id for the row
aria-labelledby	string	No		Adds accessible text to the DataList toggle
aria-label	string	No	'Details'	Adds accessible text to the DataList toggle
aria-controls	string	No	''	Allows users of some screen readers to shift focus to the controlled element. Should be used when the controlled contents are not adjacent to the toggle that controls them.

DataListContent properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the DataList item
className	string	No	''	Additional classes added to the DataList cell
id	string	No	''	Identify the DataListContent item
rowid	string	No	''	Id for the row
isHidden	boolean	No	false	Flag to show if the expanded content of the DataList item is visible
noPadding	boolean	No	false	Flag to remove padding from the expandable content
aria-label	string	Yes		Adds accessible text to the DataList toggle

CSS Variables


	.pf-c-data-list	--pf-global--Color--100	#151515
--pf-global--Color--100 --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-data-list	--pf-global--Color--200	#6a6e73
--pf-global--Color--200 --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-data-list	--pf-global--BorderColor--100	#d2d2d2
--pf-global--BorderColor--100 --pf-global--BorderColor--dark-100 $pf-global--BorderColor--dark-100 $pf-color-black-300 #d2d2d2
	.pf-c-data-list	--pf-global--primary-color--100	#06c
--pf-global--primary-color--100 --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-data-list	--pf-global--link--Color	#06c
--pf-global--link--Color --pf-global--link--Color--dark $pf-global--link--Color--dark $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-data-list	--pf-global--link--Color--hover	#004080
--pf-global--link--Color--hover --pf-global--link--Color--dark--hover $pf-global--link--Color--dark--hover $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-data-list	--pf-global--BackgroundColor--100	#fff
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-data-list	--pf-c-data-list--BackgroundColor	#fff
--pf-c-data-list--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-data-list	--pf-c-data-list--BorderTopColor	#f0f0f0
--pf-c-data-list--BorderTopColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-data-list	--pf-c-data-list--BorderTopWidth	0.5rem
--pf-c-data-list--BorderTopWidth --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-data-list	--pf-c-data-list--sm--BorderTopWidth	1px
--pf-c-data-list--sm--BorderTopWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-data-list	--pf-c-data-list--sm--BorderTopColor	#d2d2d2
--pf-c-data-list--sm--BorderTopColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-data-list	--pf-c-data-list--BorderBottomColor	#d2d2d2
--pf-c-data-list--BorderBottomColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-data-list	--pf-c-data-list--BorderBottomWidth	0
	.pf-c-data-list	--pf-c-data-list__item--m-expanded--before--BackgroundColor	#06c
--pf-c-data-list__item--m-expanded--before--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-data-list	--pf-c-data-list__item--m-selected--before--BackgroundColor	#06c
--pf-c-data-list__item--m-selected--before--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-data-list	--pf-c-data-list__item--m-selected--BoxShadow	0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-data-list__item--m-selected--BoxShadow --pf-global--BoxShadow--sm-top, --pf-global--BoxShadow--sm-bottom $pf-global--BoxShadow--sm-top, $pf-global--BoxShadow--sm-bottom 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-c-data-list	--pf-c-data-list__item--m-selectable--OutlineOffset	-0.25rem
	.pf-c-data-list	--pf-c-data-list__item--m-selectable--hover--ZIndex	100
--pf-c-data-list__item--m-selectable--hover--ZIndex --pf-global--ZIndex--xs $pf-global--ZIndex--xs 100
	.pf-c-data-list	--pf-c-data-list__item--m-selectable--hover--BoxShadow	0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-data-list__item--m-selectable--hover--BoxShadow --pf-global--BoxShadow--sm-top, --pf-global--BoxShadow--sm-bottom $pf-global--BoxShadow--sm-top, $pf-global--BoxShadow--sm-bottom 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-c-data-list	--pf-c-data-list__item--m-selectable--focus--BoxShadow	0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-data-list__item--m-selectable--focus--BoxShadow --pf-global--BoxShadow--sm-top, --pf-global--BoxShadow--sm-bottom $pf-global--BoxShadow--sm-top, $pf-global--BoxShadow--sm-bottom 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-c-data-list	--pf-c-data-list__item--m-selectable--active--BoxShadow	0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-data-list__item--m-selectable--active--BoxShadow --pf-global--BoxShadow--sm-top, --pf-global--BoxShadow--sm-bottom $pf-global--BoxShadow--sm-top, $pf-global--BoxShadow--sm-bottom 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16), 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16), 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-c-data-list	--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor	#73bcf7
--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor --pf-global--active-color--300 $pf-global--active-color--300 $pf-color-blue-200 #73bcf7
	.pf-c-data-list	--pf-c-data-list__item-item--BorderTopColor	#f0f0f0
--pf-c-data-list__item-item--BorderTopColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-data-list	--pf-c-data-list__item-item--BorderTopWidth	0.5rem
	.pf-c-data-list	--pf-c-data-list__item--hover--item--BorderTopColor	#f0f0f0
--pf-c-data-list__item--hover--item--BorderTopColor --pf-c-data-list__item-item--BorderTopColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-data-list	--pf-c-data-list__item--hover--item--BorderTopWidth	0.5rem
--pf-c-data-list__item--hover--item--BorderTopWidth --pf-c-data-list__item-item--BorderTopWidth 0.5rem
	.pf-c-data-list	--pf-c-data-list__item-item--sm--BorderTopWidth	1px
--pf-c-data-list__item-item--sm--BorderTopWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-data-list	--pf-c-data-list__item-item--sm--BorderTopColor	#d2d2d2
--pf-c-data-list__item-item--sm--BorderTopColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-data-list	--pf-c-data-list__item--before--BackgroundColor	transparent
	.pf-c-data-list	--pf-c-data-list__item--before--Width	3px
--pf-c-data-list__item--before--Width --pf-global--BorderWidth--lg $pf-global--BorderWidth--lg 3px
	.pf-c-data-list	--pf-c-data-list__item--before--Transition	all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-data-list__item--before--Transition --pf-global--Transition $pf-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
	.pf-c-data-list	--pf-c-data-list__item--before--ZIndex	500
--pf-c-data-list__item--before--ZIndex --pf-global--ZIndex--xl $pf-global--ZIndex--xl 500
	.pf-c-data-list	--pf-c-data-list__item--before--Top	0
	.pf-c-data-list	--pf-c-data-list__item--before--Bottom	0
	.pf-c-data-list	--pf-c-data-list__item-item--before--Top	calc(0.5rem * -1)
--pf-c-data-list__item-item--before--Top calc(--pf-c-data-list__item-item--BorderTopWidth * -1) calc(0.5rem * -1)
	.pf-c-data-list	--pf-c-data-list__item-row--PaddingRight	1rem
--pf-c-data-list__item-row--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-data-list	--pf-c-data-list__item-row--PaddingLeft	1rem
--pf-c-data-list__item-row--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-data-list	--pf-c-data-list__item-row--xl--PaddingRight	1.5rem
--pf-c-data-list__item-row--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-data-list	--pf-c-data-list__item-row--xl--PaddingLeft	1.5rem
--pf-c-data-list__item-row--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-data-list	--pf-c-data-list__item-content--md--PaddingBottom	1.5rem
--pf-c-data-list__item-content--md--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-data-list	--pf-c-data-list__cell--PaddingTop	1.5rem
--pf-c-data-list__cell--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-data-list	--pf-c-data-list__cell--PaddingBottom	1.5rem
--pf-c-data-list__cell--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-data-list	--pf-c-data-list__cell--md--PaddingBottom	0
	.pf-c-data-list	--pf-c-data-list__cell--m-icon--MarginRight	1rem
--pf-c-data-list__cell--m-icon--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-data-list	--pf-c-data-list__cell-cell--PaddingTop	0
	.pf-c-data-list	--pf-c-data-list__cell-cell--md--PaddingTop	1.5rem
--pf-c-data-list__cell-cell--md--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-data-list	--pf-c-data-list__cell-cell--MarginRight	2rem
--pf-c-data-list__cell-cell--MarginRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-data-list	--pf-c-data-list__toggle--MarginLeft	calc(0.5rem * -1)
--pf-c-data-list__toggle--MarginLeft calc(--pf-global--spacer--sm * -1) calc($pf-global--spacer--sm * -1) calc(pf-size-prem(8px) * -1) calc(0.5rem * -1)
	.pf-c-data-list	--pf-c-data-list__toggle--MarginTop	calc(0.375rem * -1)
--pf-c-data-list__toggle--MarginTop calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-data-list	--pf-c-data-list__toggle-icon--Transition	.2s ease-in 0s
	.pf-c-data-list	--pf-c-data-list__item--m-expanded__toggle--c-button-icon--Transform	rotate(90deg)
	.pf-c-data-list	--pf-c-data-list__item-control--PaddingTop	1.5rem
--pf-c-data-list__item-control--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-data-list	--pf-c-data-list__item-control--PaddingBottom	1.5rem
--pf-c-data-list__item-control--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-data-list	--pf-c-data-list__item-control--MarginRight	1rem
--pf-c-data-list__item-control--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-data-list	--pf-c-data-list__item-control--md--MarginRight	2rem
--pf-c-data-list__item-control--md--MarginRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-data-list	--pf-c-data-list__item-control--not-last-child--MarginRight	1rem
--pf-c-data-list__item-control--not-last-child--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-data-list	--pf-c-data-list__item-action--Display	flex
	.pf-c-data-list	--pf-c-data-list__item-action--PaddingTop	1.5rem
--pf-c-data-list__item-action--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-data-list	--pf-c-data-list__item-action--PaddingBottom	1.5rem
--pf-c-data-list__item-action--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-data-list	--pf-c-data-list__item-action--MarginLeft	1rem
--pf-c-data-list__item-action--MarginLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-data-list	--pf-c-data-list__item-action--md--MarginLeft	2rem
--pf-c-data-list__item-action--md--MarginLeft --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-data-list	--pf-c-data-list__item-action--not-last-child--MarginRight	1rem
--pf-c-data-list__item-action--not-last-child--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-data-list	--pf-c-data-list__action--MarginTop	calc(0.375rem * -1)
--pf-c-data-list__action--MarginTop calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-data-list	--pf-c-data-list__expandable-content--BorderTopWidth	1px
--pf-c-data-list__expandable-content--BorderTopWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-data-list	--pf-c-data-list__expandable-content--BorderRightWidth	0
	.pf-c-data-list	--pf-c-data-list__expandable-content--BorderBottomWidth	1px
--pf-c-data-list__expandable-content--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-data-list	--pf-c-data-list__expandable-content--BorderLeftWidth	0
	.pf-c-data-list	--pf-c-data-list__expandable-content--BorderTopColor	#d2d2d2
--pf-c-data-list__expandable-content--BorderTopColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-data-list	--pf-c-data-list__expandable-content--BorderRightColor	transparent
	.pf-c-data-list	--pf-c-data-list__expandable-content--BorderBottomColor	#d2d2d2
--pf-c-data-list__expandable-content--BorderBottomColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-data-list	--pf-c-data-list__expandable-content--BorderLeftColor	transparent
	.pf-c-data-list	--pf-c-data-list__expandable-content--MarginRight	calc(1rem * -1)
--pf-c-data-list__expandable-content--MarginRight calc(--pf-c-data-list__expandable-content-body--PaddingRight * -1) calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-data-list	--pf-c-data-list__expandable-content--MarginLeft	calc(1rem * -1)
--pf-c-data-list__expandable-content--MarginLeft calc(--pf-c-data-list__expandable-content-body--PaddingLeft * -1) calc(--pf-global--spacer--md * -1) calc($pf-global--spacer--md * -1) calc(pf-size-prem(16px) * -1) calc(1rem * -1)
	.pf-c-data-list	--pf-c-data-list__expandable-content--MaxHeight	37.5rem
	.pf-c-data-list	--pf-c-data-list__expandable-content--before--Top	calc(0.5rem * -1)
--pf-c-data-list__expandable-content--before--Top calc(--pf-c-data-list__item-item--BorderTopWidth * -1) calc(0.5rem * -1)
	.pf-c-data-list	--pf-c-data-list__expandable-content-body--PaddingTop	1rem
--pf-c-data-list__expandable-content-body--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-data-list	--pf-c-data-list__expandable-content-body--PaddingRight	1rem
--pf-c-data-list__expandable-content-body--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-data-list	--pf-c-data-list__expandable-content-body--PaddingBottom	1rem
--pf-c-data-list__expandable-content-body--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-data-list	--pf-c-data-list__expandable-content-body--PaddingLeft	1rem
--pf-c-data-list__expandable-content-body--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-data-list	--pf-c-data-list__expandable-content-body--md--PaddingTop	1.5rem
--pf-c-data-list__expandable-content-body--md--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-data-list	--pf-c-data-list__expandable-content-body--xl--PaddingRight	1.5rem
--pf-c-data-list__expandable-content-body--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-data-list	--pf-c-data-list__expandable-content-body--md--PaddingBottom	1.5rem
--pf-c-data-list__expandable-content-body--md--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-data-list	--pf-c-data-list__expandable-content-body--xl--PaddingLeft	1.5rem
--pf-c-data-list__expandable-content-body--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-data-list	--pf-c-data-list--m-compact--FontSize	0.875rem
--pf-c-data-list--m-compact--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-data-list	--pf-c-data-list--m-compact__check--FontSize	1rem
--pf-c-data-list--m-compact__check--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-data-list	--pf-c-data-list--m-compact__cell--PaddingTop	0.5rem
--pf-c-data-list--m-compact__cell--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-data-list	--pf-c-data-list--m-compact__cell--PaddingBottom	0.5rem
--pf-c-data-list--m-compact__cell--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-data-list	--pf-c-data-list--m-compact__cell--md--PaddingBottom	0
	.pf-c-data-list	--pf-c-data-list--m-compact__cell-cell--PaddingTop	0
	.pf-c-data-list	--pf-c-data-list--m-compact__cell-cell--md--PaddingTop	0.5rem
--pf-c-data-list--m-compact__cell-cell--md--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-data-list	--pf-c-data-list--m-compact__cell-cell--MarginRight	1rem
--pf-c-data-list--m-compact__cell-cell--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-data-list	--pf-c-data-list--m-compact__item-control--PaddingTop	0.5rem
--pf-c-data-list--m-compact__item-control--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-data-list	--pf-c-data-list--m-compact__item-control--PaddingBottom	0
	.pf-c-data-list	--pf-c-data-list--m-compact__item-control--MarginRight	1rem
--pf-c-data-list--m-compact__item-control--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-data-list	--pf-c-data-list--m-compact__item-action--PaddingTop	0.5rem
--pf-c-data-list--m-compact__item-action--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-data-list	--pf-c-data-list--m-compact__item-action--PaddingBottom	0.5rem
--pf-c-data-list--m-compact__item-action--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-data-list	--pf-c-data-list--m-compact__item-action--MarginLeft	1rem
--pf-c-data-list--m-compact__item-action--MarginLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-data-list	--pf-c-data-list--m-compact__item-content--PaddingBottom	0.5rem
--pf-c-data-list--m-compact__item-content--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-data-list__item-action	--pf-hidden-visible--visible--Visibility	visible
	.pf-c-data-list__item-action	--pf-hidden-visible--hidden--Display	none
	.pf-c-data-list__item-action	--pf-hidden-visible--hidden--Visibility	hidden
	.pf-c-data-list__item-action	--pf-hidden-visible--Display	flex
--pf-hidden-visible--Display --pf-hidden-visible--visible--Display --pf-c-data-list__item-action--Display flex
	.pf-c-data-list__item-action	--pf-hidden-visible--Visibility	visible
--pf-hidden-visible--Visibility --pf-hidden-visible--visible--Visibility visible
	.pf-c-data-list__item-action	--pf-hidden-visible--visible--Display	flex
--pf-hidden-visible--visible--Display --pf-c-data-list__item-action--Display flex
	.pf-m-hidden.pf-c-data-list__item-action	--pf-hidden-visible--Display	none
--pf-hidden-visible--Display --pf-hidden-visible--hidden--Display none
	.pf-m-hidden.pf-c-data-list__item-action	--pf-hidden-visible--Visibility	hidden
--pf-hidden-visible--Visibility --pf-hidden-visible--hidden--Visibility hidden
	.pf-c-data-list.pf-m-compact	--pf-c-data-list__cell--PaddingTop	0.5rem
--pf-c-data-list__cell--PaddingTop --pf-c-data-list--m-compact__cell--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-data-list.pf-m-compact	--pf-c-data-list__cell--PaddingBottom	0.5rem
--pf-c-data-list__cell--PaddingBottom --pf-c-data-list--m-compact__cell--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-data-list.pf-m-compact	--pf-c-data-list__cell-cell--MarginRight	1rem
--pf-c-data-list__cell-cell--MarginRight --pf-c-data-list--m-compact__cell-cell--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-data-list.pf-m-compact	--pf-c-data-list__cell-cell--PaddingTop	0
--pf-c-data-list__cell-cell--PaddingTop --pf-c-data-list--m-compact__cell-cell--PaddingTop 0
	.pf-c-data-list.pf-m-compact	--pf-c-data-list__item-action--MarginLeft	1rem
--pf-c-data-list__item-action--MarginLeft --pf-c-data-list--m-compact__item-action--MarginLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-data-list.pf-m-compact	--pf-c-data-list__item-action--PaddingTop	0.5rem
--pf-c-data-list__item-action--PaddingTop --pf-c-data-list--m-compact__item-action--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-data-list.pf-m-compact	--pf-c-data-list__item-action--PaddingBottom	0.5rem
--pf-c-data-list__item-action--PaddingBottom --pf-c-data-list--m-compact__item-action--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-data-list.pf-m-compact	--pf-c-data-list__item-control--MarginRight	1rem
--pf-c-data-list__item-control--MarginRight --pf-c-data-list--m-compact__item-control--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-data-list.pf-m-compact	--pf-c-data-list__item-control--PaddingTop	0.5rem
--pf-c-data-list__item-control--PaddingTop --pf-c-data-list--m-compact__item-control--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-data-list.pf-m-compact	--pf-c-data-list__item-control--PaddingBottom	0
--pf-c-data-list__item-control--PaddingBottom --pf-c-data-list--m-compact__item-control--PaddingBottom 0
	.pf-c-data-list.pf-m-compact	--pf-c-data-list__item-content--md--PaddingBottom	0.5rem
--pf-c-data-list__item-content--md--PaddingBottom --pf-c-data-list--m-compact__item-content--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-data-list__item:not(.pf-m-expanded):not(.pf-m-selected):not(:last-child).pf-m-selectable:hover	--pf-c-data-list__item-item--BorderTopWidth	0
	.pf-c-data-list__item.pf-m-selected	--pf-c-data-list__item--before--BackgroundColor	#06c
--pf-c-data-list__item--before--BackgroundColor --pf-c-data-list__item--m-selected--before--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-data-list__item.pf-m-expanded	--pf-c-data-list__item--before--BackgroundColor	#06c
--pf-c-data-list__item--before--BackgroundColor --pf-c-data-list__item--m-expanded--before--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected)	--pf-c-data-list__item--before--BackgroundColor	#73bcf7
--pf-c-data-list__item--before--BackgroundColor --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor --pf-global--active-color--300 $pf-global--active-color--300 $pf-color-blue-200 #73bcf7