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 Documentation CSS Variables

Examples

Basic

Primary content

Secondary content
Secondary content (pf-m-no-fill)

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

Accessibility

Attribute	Applied to	Outcome
`role="list"`	`.pf-c-data-list`	Indicates that the data list is a list. Required
`aria-label`	`.pf-c-data-list`	Provides an accessible name for the data list. Required
`aria-labelledby`	`.pf-c-data-list__item`	Provides an accessible description for data list item. Required
`id`	`.pf-c-data-list__cell`, `.pf-c-data-list__cell *`	Provides a reference for data list item description. Required

Usage

Class	Applied to	Outcome
`.pf-c-data-list`	`<ul>`	Initiates a data list. Required
`.pf-c-data-list__item`	`<li>`	Initiates a data list item. Required
`.pf-c-data-list__item-row`	`<div>`	Initiates a data list item row. Required
`.pf-c-data-list__item-content`	`<div>`	Initiates a container for data list content. Required
`.pf-c-data-list__cell`	`*`	Initiates a data list content cell. Required
`.pf-m-align-left`	`.pf-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-c-data-list__cell`	Modifies a data list cell to not fill the available horizontal space.
`.pf-m-align-right`	`.pf-c-data-list__cell`	Modifies a data list cell to align-right.

With headings

Primary content

Secondary content
Secondary content (pf-m-no-fill)

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

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

Primary contentDolor sit amet, consectetur adipisicing elit, sed do eiusmod.

Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

Tertiary ContentDolor sit amet, consectetur adipisicing elit, sed do eiusmod.

More ContentDolor sit amet, consectetur adipisicing elit, sed do eiusmod.

More ContentDolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Primary content - lorem ipsumdolor sit amet, consectetur adipisicing elit, sed do eiusmod.

Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Primary content - lorem ipsumdolor sit amet, consectetur adipisicing elit, sed do eiusmod.

Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

Accessibility

Attribute	Applied to	Outcome
`aria-label="[descriptive text]"`	`.pf-c-data-list__action` > `.pf-c-button`	Provides an accessible label buttons. Required
`aria-labelledby="{title_cell_id}"`	`.pf-c-data-list__check` > `.pf-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-c-data-list__action` > `.pf-c-button`	Creates an accessible label for the action button using the title cell and button label Required
`id`	`.pf-c-data-list__cell > *`, `.pf-c-data-list__check` > `.pf-c-check__input`, `.pf-c-data-list__action` > `.pf-c-button`	Provides a reference for interactive elements. Required

Usage

Class	Applied to	Outcome
`.pf-c-data-list__item-control`	`<div>`	Initiates a container for data list controls. For example, add `.pf-c-data-list__check` here. Required
`.pf-c-data-list__item-action`	`<div>`	Initiates a container for the data list actions. For example, add `.pf-c-data-list__action` here. Required
`.pf-c-data-list__check`	`<div>`	Initiates a data list check cell. Required
`.pf-c-data-list__action`	`<div>`	Initiates a data list action button cell. Required
`.pf-m-hidden{-on-[breakpoint]}`	`.pf-c-data-list__item-action`	Hides an actions container at a given breakpoint, or hides it at all breakpoints with `.pf-m-hidden`.
`.pf-m-visible{-on-[breakpoint]}`	`.pf-c-data-list__item-action`	Shows an actions container at a given breakpoint.

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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.

Compact

Primary contentDolor sit amet, consectetur adipisicing elit, sed do eiusmod.

Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

Tertiary ContentDolor sit amet, consectetur adipisicing elit, sed do eiusmod.

More ContentDolor sit amet, consectetur adipisicing elit, sed do eiusmod.

More ContentDolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Primary content - lorem ipsumdolor sit amet, consectetur adipisicing elit, sed do eiusmod.

Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Primary content - lorem ipsumdolor sit amet, consectetur adipisicing elit, sed do eiusmod.

Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

Accessibility

Attribute	Applied to	Outcome
`aria-expanded="true"`	`.pf-c-data-list__toggle` > `.pf-c-button`	Indicates that the expandable content is visible. Required
`hidden`	`.pf-c-data-list__expandable-content`	Indicates that the expandable content is hidden. Required
`aria-label="[descriptive text]"`	`.pf-c-data-list__toggle` > `.pf-c-button`	Provides an accessible name for toggle button. Required
`aria-labelledby="{title_cell_id} {button_id}"`	`.pf-c-data-list__toggle` > `.pf-c-button`	Establishes relationship between aria-label text and toggle button. Required
`id="{button_id}"`	`.pf-c-data-list__toggle` > `.pf-c-button`	Provides a reference for toggle button description. Required
`aria-controls="[id of element controlled]"`	`.pf-c-data-list__toggle` > `.pf-c-button`	Identifies the section controlled by the toggle button. Required

Usage

Class	Applied to	Outcome
`.pf-c-data-list__item-control`	`<div>`	Initiates a container for data list controls. For example, add `.pf-c-data-list__toggle` here. Required
`.pf-c-data-list__toggle`	`<div>`	Initiates a toggle button.
`.pf-c-data-list__toggle-icon`	`<span>`	Initiates a toggle icon.
`.pf-c-data-list__expandable-content`	`<div>`	Initiates an expandable content container.
`.pf-c-data-list__expandable-content-body`	`<div>`	Initiates an expandable content container body. Required when `.pf-c-data-list__expandable-content` is used.
`.pf-m-expanded`	`.pf-c-data-list__item`	Modifies for expanded state.
`.pf-m-compact`	`.pf-c-data-list`	Modifies for compact variation.
`.pf-m-no-padding`	`.pf-c-data-list__expandable-content-body`	Removes padding for the expandable content body.
`.pf-m-icon`	`.pf-c-data-list__cell`	Modifies a data list cell to not grow and align-left when its the first data-list__cell element.

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

.pf-m-flex-2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

.pf-m-flex-4
Lorem ipsum dolor sit amet.

.pf-m-flex-6
Lorem ipsum dolor sit amet.

Flex modifiers - example 3

.pf-m-flex-5
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.pf-m-flex-2
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.pf-m-flex-3
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

.pf-m-flex-3
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Accessibility

Attribute	Applied to	Outcome
`aria-controls="[id of element controlled]"`	`.pf-c-data-list__toggle` > `.pf-c-button`	Identifies the section controlled by the toggle button. Required

Usage

Class	Applied to	Outcome
`.pf-m-flex-{1, 2, 3, 4, 5}`	`.pf-c-data-list__cell`	Percentage based modifier for `.pf-c-data-list__cell` widths.

Selectable rows

Primary content
Secondary content (selected)
Tertiary content

Accessibility

Attribute	Applied to	Outcome
`tabindex="0"`	`.pf-c-data-list__item.pf-m-selectable`	Inserts the selectable row into the tab order of the page so that it is focusable. Required

Usage

Class	Applied to	Outcome
`.pf-m-selectable`	`.pf-c-data-list__item`	Modifies a data list item so that it is selectable.
`.pf-m-selected`	`.pf-c-data-list__item`	Modifies a data list item for the selected state.

Selectable expandable rows

Primary content (selected, expanded)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Secondary content
Tertiary content (not selected, expanded)

This expanded section has no padding.
Quaternary content (selected)

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-c-data-list__cells. DataLists do not have headers. If headers are required, use the table component.

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

Data list

Examples

Basic

Accessibility

Usage

With headings

Primary content

Secondary content (pf-m-no-fill)

Usage

Checkboxes, actions, and additional cells

Accessibility

Usage

Expandable

Compact

Accessibility

Usage

Modifiers

Default fitting - example 1

Flex modifiers - example 2

Flex modifiers - example 3

Accessibility

Usage

Selectable rows

Accessibility

Usage

Selectable expandable rows

Documentation

Overview

CSS Variables