Skip to Content
Patternfly Logo

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

ExamplesDocumentationCSS Variables

Examples

Basic

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

Accessibility

AttributeApplied toOutcome
role="list".pf-c-data-listIndicates that the data list is a list. Required
aria-label.pf-c-data-listProvides an accessible name for the data list. Required
aria-labelledby.pf-c-data-list__itemProvides 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

ClassApplied toOutcome
.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__cellModifies 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__cellModifies a data list cell to not fill the available horizontal space.
.pf-m-align-right.pf-c-data-list__cellModifies 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

AttributeApplied toOutcome
aria-label="[descriptive text]".pf-c-data-list__action > .pf-c-buttonProvides an accessible label buttons. Required
aria-labelledby="{title_cell_id}".pf-c-data-list__check > .pf-c-check__inputCreates 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-buttonCreates 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-buttonProvides a reference for interactive elements. Required

Usage

ClassApplied toOutcome
.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-actionHides 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-actionShows 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.
  • 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

AttributeApplied toOutcome
aria-expanded="true".pf-c-data-list__toggle > .pf-c-buttonIndicates that the expandable content is visible. Required
hidden.pf-c-data-list__expandable-contentIndicates that the expandable content is hidden. Required
aria-label="[descriptive text]".pf-c-data-list__toggle > .pf-c-buttonProvides an accessible name for toggle button. Required
aria-labelledby="{title_cell_id} {button_id}".pf-c-data-list__toggle > .pf-c-buttonEstablishes relationship between aria-label text and toggle button. Required
id="{button_id}".pf-c-data-list__toggle > .pf-c-buttonProvides a reference for toggle button description. Required
aria-controls="[id of element controlled]".pf-c-data-list__toggle > .pf-c-buttonIdentifies the section controlled by the toggle button. Required

Usage

ClassApplied toOutcome
.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__itemModifies for expanded state.
.pf-m-compact.pf-c-data-listModifies for compact variation.
.pf-m-no-padding.pf-c-data-list__expandable-content-bodyRemoves padding for the expandable content body.
.pf-m-icon.pf-c-data-list__cellModifies 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

AttributeApplied toOutcome
aria-controls="[id of element controlled]".pf-c-data-list__toggle > .pf-c-buttonIdentifies the section controlled by the toggle button. Required

Usage

ClassApplied toOutcome
.pf-m-flex-{1, 2, 3, 4, 5}.pf-c-data-list__cellPercentage based modifier for .pf-c-data-list__cell widths.

Selectable rows

  • Primary content
  • Secondary content (selected)
  • Tertiary content

Accessibility

AttributeApplied toOutcome
tabindex="0".pf-c-data-list__item.pf-m-selectableInserts the selectable row into the tab order of the page so that it is focusable. Required

Usage

ClassApplied toOutcome
.pf-m-selectable.pf-c-data-list__itemModifies a data list item so that it is selectable.
.pf-m-selected.pf-c-data-list__itemModifies 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--100global_Color_100
#151515
.pf-c-data-list--pf-global--Color--200global_Color_200
#6a6e73
.pf-c-data-list--pf-global--BorderColor--100global_BorderColor_100
#d2d2d2
.pf-c-data-list--pf-global--primary-color--100global_primary_color_100
#06c
.pf-c-data-list--pf-global--link--Colorglobal_link_Color
#06c
.pf-c-data-list--pf-global--link--Color--hoverglobal_link_Color_hover
#004080
.pf-c-data-list--pf-global--BackgroundColor--100global_BackgroundColor_100
#fff
.pf-c-data-list--pf-c-data-list--BorderTopColorc_data_list_BorderTopColor
#f0f0f0
.pf-c-data-list--pf-c-data-list--BorderTopWidthc_data_list_BorderTopWidth
0.5rem
.pf-c-data-list--pf-c-data-list--sm--BorderTopWidthc_data_list_sm_BorderTopWidth
1px
.pf-c-data-list--pf-c-data-list--sm--BorderTopColorc_data_list_sm_BorderTopColor
#d2d2d2
.pf-c-data-list--pf-c-data-list__item--BackgroundColorc_data_list__item_BackgroundColor
#fff
.pf-c-data-list--pf-c-data-list__item--m-selected--ZIndexc_data_list__item_m_selected_ZIndex
100
.pf-c-data-list--pf-c-data-list__item--m-expanded--before--BackgroundColorc_data_list__item_m_expanded_before_BackgroundColor
#06c
.pf-c-data-list--pf-c-data-list__item--m-selected--before--BackgroundColorc_data_list__item_m_selected_before_BackgroundColor
#06c
.pf-c-data-list--pf-c-data-list__item--m-selected--BoxShadowc_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--pf-c-data-list__item--m-selectable--OutlineOffsetc_data_list__item_m_selectable_OutlineOffset
calc(-1 * 0.25rem)
.pf-c-data-list--pf-c-data-list__item--m-selectable--hover--ZIndexc_data_list__item_m_selectable_hover_ZIndex
calc(100 + 1)
.pf-c-data-list--pf-c-data-list__item--m-selectable--hover--BoxShadowc_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--pf-c-data-list__item--m-selectable--focus--BoxShadowc_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--pf-c-data-list__item--m-selectable--active--BoxShadowc_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--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColorc_data_list__item_m_expanded_m_selectable_before_BackgroundColor
#73bcf7
.pf-c-data-list--pf-c-data-list__item--BorderBottomColorc_data_list__item_BorderBottomColor
#f0f0f0
.pf-c-data-list--pf-c-data-list__item--BorderBottomWidthc_data_list__item_BorderBottomWidth
0.5rem
.pf-c-data-list--pf-c-data-list__item--m-selectable--hover--item--BorderTopColorc_data_list__item_m_selectable_hover_item_BorderTopColor
#f0f0f0
.pf-c-data-list--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidthc_data_list__item_m_selectable_hover_item_BorderTopWidth
0.5rem
.pf-c-data-list--pf-c-data-list__item--sm--BorderBottomWidthc_data_list__item_sm_BorderBottomWidth
1px
.pf-c-data-list--pf-c-data-list__item--sm--BorderBottomColorc_data_list__item_sm_BorderBottomColor
#d2d2d2
.pf-c-data-list--pf-c-data-list__item--before--BackgroundColorc_data_list__item_before_BackgroundColor
transparent
.pf-c-data-list--pf-c-data-list__item--before--Widthc_data_list__item_before_Width
3px
.pf-c-data-list--pf-c-data-list__item--before--Transitionc_data_list__item_before_Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-data-list--pf-c-data-list__item--before--Topc_data_list__item_before_Top
0
.pf-c-data-list--pf-c-data-list__item--before--sm--Topc_data_list__item_before_sm_Top
calc(0.5rem * -1)
.pf-c-data-list--pf-c-data-list__item-row--PaddingRightc_data_list__item_row_PaddingRight
1rem
.pf-c-data-list--pf-c-data-list__item-row--PaddingLeftc_data_list__item_row_PaddingLeft
1rem
.pf-c-data-list--pf-c-data-list__item-row--xl--PaddingRightc_data_list__item_row_xl_PaddingRight
1.5rem
.pf-c-data-list--pf-c-data-list__item-row--xl--PaddingLeftc_data_list__item_row_xl_PaddingLeft
1.5rem
.pf-c-data-list--pf-c-data-list__item-content--md--PaddingBottomc_data_list__item_content_md_PaddingBottom
1.5rem
.pf-c-data-list--pf-c-data-list__cell--PaddingTopc_data_list__cell_PaddingTop
1.5rem
.pf-c-data-list--pf-c-data-list__cell--PaddingBottomc_data_list__cell_PaddingBottom
1.5rem
.pf-c-data-list--pf-c-data-list__cell--MarginRightc_data_list__cell_MarginRight
2rem
.pf-c-data-list--pf-c-data-list__cell--md--PaddingBottomc_data_list__cell_md_PaddingBottom
0
.pf-c-data-list--pf-c-data-list__cell--m-icon--MarginRightc_data_list__cell_m_icon_MarginRight
1rem
.pf-c-data-list--pf-c-data-list__cell--cell--PaddingTopc_data_list__cell_cell_PaddingTop
0
.pf-c-data-list--pf-c-data-list__cell--cell--md--PaddingTopc_data_list__cell_cell_md_PaddingTop
1.5rem
.pf-c-data-list--pf-c-data-list__cell--m-icon--cell--PaddingTopc_data_list__cell_m_icon_cell_PaddingTop
1.5rem
.pf-c-data-list--pf-c-data-list__toggle--MarginLeftc_data_list__toggle_MarginLeft
calc(0.5rem * -1)
.pf-c-data-list--pf-c-data-list__toggle--MarginTopc_data_list__toggle_MarginTop
calc(0.375rem * -1)
.pf-c-data-list--pf-c-data-list__toggle-icon--Transitionc_data_list__toggle_icon_Transition
.2s ease-in 0s
.pf-c-data-list--pf-c-data-list__item--m-expanded__toggle-icon--Rotatec_data_list__item_m_expanded__toggle_icon_Rotate
90deg
.pf-c-data-list--pf-c-data-list__item-control--PaddingTopc_data_list__item_control_PaddingTop
1.5rem
.pf-c-data-list--pf-c-data-list__item-control--PaddingBottomc_data_list__item_control_PaddingBottom
1.5rem
.pf-c-data-list--pf-c-data-list__item-control--MarginRightc_data_list__item_control_MarginRight
1rem
.pf-c-data-list--pf-c-data-list__item-control--md--MarginRightc_data_list__item_control_md_MarginRight
2rem
.pf-c-data-list--pf-c-data-list__item-control--not-last-child--MarginRightc_data_list__item_control_not_last_child_MarginRight
1rem
.pf-c-data-list--pf-c-data-list__item-action--Displayc_data_list__item_action_Display
flex
.pf-c-data-list--pf-c-data-list__item-action--PaddingTopc_data_list__item_action_PaddingTop
1.5rem
.pf-c-data-list--pf-c-data-list__item-action--PaddingBottomc_data_list__item_action_PaddingBottom
1.5rem
.pf-c-data-list--pf-c-data-list__item-action--MarginLeftc_data_list__item_action_MarginLeft
1rem
.pf-c-data-list--pf-c-data-list__item-action--md--MarginLeftc_data_list__item_action_md_MarginLeft
2rem
.pf-c-data-list--pf-c-data-list__item-action--not-last-child--MarginRightc_data_list__item_action_not_last_child_MarginRight
1rem
.pf-c-data-list--pf-c-data-list__action--MarginTopc_data_list__action_MarginTop
calc(0.375rem * -1)
.pf-c-data-list--pf-c-data-list__expandable-content--BorderTopWidthc_data_list__expandable_content_BorderTopWidth
1px
.pf-c-data-list--pf-c-data-list__expandable-content--BorderTopColorc_data_list__expandable_content_BorderTopColor
#d2d2d2
.pf-c-data-list--pf-c-data-list__expandable-content--MarginRightc_data_list__expandable_content_MarginRight
calc(1rem * -1)
.pf-c-data-list--pf-c-data-list__expandable-content--MarginLeftc_data_list__expandable_content_MarginLeft
calc(1rem * -1)
.pf-c-data-list--pf-c-data-list__expandable-content--MaxHeightc_data_list__expandable_content_MaxHeight
37.5rem
.pf-c-data-list--pf-c-data-list__expandable-content--before--Topc_data_list__expandable_content_before_Top
calc(0.5rem * -1)
.pf-c-data-list--pf-c-data-list__expandable-content-body--PaddingTopc_data_list__expandable_content_body_PaddingTop
1rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--PaddingRightc_data_list__expandable_content_body_PaddingRight
1rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--PaddingBottomc_data_list__expandable_content_body_PaddingBottom
1rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--PaddingLeftc_data_list__expandable_content_body_PaddingLeft
1rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--md--PaddingTopc_data_list__expandable_content_body_md_PaddingTop
1.5rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--xl--PaddingRightc_data_list__expandable_content_body_xl_PaddingRight
1.5rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--md--PaddingBottomc_data_list__expandable_content_body_md_PaddingBottom
1.5rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--xl--PaddingLeftc_data_list__expandable_content_body_xl_PaddingLeft
1.5rem
.pf-c-data-list--pf-c-data-list--m-compact--FontSizec_data_list_m_compact_FontSize
0.875rem
.pf-c-data-list--pf-c-data-list--m-compact__check--FontSizec_data_list_m_compact__check_FontSize
1rem
.pf-c-data-list--pf-c-data-list--m-compact__cell--PaddingTopc_data_list_m_compact__cell_PaddingTop
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__cell--PaddingBottomc_data_list_m_compact__cell_PaddingBottom
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__cell--md--PaddingBottomc_data_list_m_compact__cell_md_PaddingBottom
0
.pf-c-data-list--pf-c-data-list--m-compact__cell-cell--PaddingTopc_data_list_m_compact__cell_cell_PaddingTop
0
.pf-c-data-list--pf-c-data-list--m-compact__cell-cell--md--PaddingTopc_data_list_m_compact__cell_cell_md_PaddingTop
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__cell--cell--MarginRightc_data_list_m_compact__cell_cell_MarginRight
1rem
.pf-c-data-list--pf-c-data-list--m-compact__item-control--PaddingTopc_data_list_m_compact__item_control_PaddingTop
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__item-control--PaddingBottomc_data_list_m_compact__item_control_PaddingBottom
0
.pf-c-data-list--pf-c-data-list--m-compact__item-control--MarginRightc_data_list_m_compact__item_control_MarginRight
1rem
.pf-c-data-list--pf-c-data-list--m-compact__item-action--PaddingTopc_data_list_m_compact__item_action_PaddingTop
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__item-action--PaddingBottomc_data_list_m_compact__item_action_PaddingBottom
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__item-action--MarginLeftc_data_list_m_compact__item_action_MarginLeft
1rem
.pf-c-data-list--pf-c-data-list--m-compact__item-content--PaddingBottomc_data_list_m_compact__item_content_PaddingBottom
0.5rem
.pf-c-data-list__item-action--pf-hidden-visible--visible--Visibilityhidden_visible_visible_Visibility
visible
.pf-c-data-list__item-action--pf-hidden-visible--hidden--Displayhidden_visible_hidden_Display
none
.pf-c-data-list__item-action--pf-hidden-visible--hidden--Visibilityhidden_visible_hidden_Visibility
hidden
.pf-c-data-list__item-action--pf-hidden-visible--Displayhidden_visible_Display
flex
.pf-c-data-list__item-action--pf-hidden-visible--Visibilityhidden_visible_Visibility
visible
.pf-c-data-list__item-action--pf-hidden-visible--visible--Displayhidden_visible_visible_Display
flex
.pf-m-hidden.pf-c-data-list__item-action--pf-hidden-visible--Displayhidden_visible_Display
none
.pf-m-hidden.pf-c-data-list__item-action--pf-hidden-visible--Visibilityhidden_visible_Visibility
hidden
.pf-c-data-list.pf-m-compact--pf-c-data-list__cell--PaddingTopc_data_list__cell_PaddingTop
0.5rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__cell--PaddingBottomc_data_list__cell_PaddingBottom
0.5rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__cell--MarginRightc_data_list__cell_MarginRight
1rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__cell--cell--PaddingTopc_data_list__cell_cell_PaddingTop
0
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-action--MarginLeftc_data_list__item_action_MarginLeft
1rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-action--PaddingTopc_data_list__item_action_PaddingTop
0.5rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-action--PaddingBottomc_data_list__item_action_PaddingBottom
0.5rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-control--MarginRightc_data_list__item_control_MarginRight
1rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-control--PaddingTopc_data_list__item_control_PaddingTop
0.5rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-control--PaddingBottomc_data_list__item_control_PaddingBottom
0
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-content--md--PaddingBottomc_data_list__item_content_md_PaddingBottom
0.5rem
.pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child)--pf-c-data-list__item--BorderBottomWidthc_data_list__item_BorderBottomWidth
0
.pf-c-data-list__item.pf-m-selected--pf-c-data-list__item--before--BackgroundColorc_data_list__item_before_BackgroundColor
#06c
.pf-c-data-list__item.pf-m-expanded--pf-c-data-list__item--before--BackgroundColorc_data_list__item_before_BackgroundColor
#06c
.pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected)--pf-c-data-list__item--before--BackgroundColorc_data_list__item_before_BackgroundColor
#73bcf7