Patternfly Logo

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-c-data-list__cell-text<span>Initiates a data list content cell text element.
.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.

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)

Draggable

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.

Accessibility

AttributeApplied toOutcome
aria-pressed="true or false".pf-c-data-list__item-draggable-buttonIndicates 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.pf-c-data-list__cell-textHighly Recommended to give screen reader users live feedback about what's happening during interaction with the data list, both during drag and drop interactions and keyboard interactions.
aria-describedby="[id value of applicable content]".pf-c-data-list__item-draggable-buttonHighly recommended 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="[]"></div>
aria-labelledby="[id value of .pf-c-data-list__item-draggable-button] [id value of .pf-c-data-list__cell-text]"]".pf-c-data-list__item-draggable-buttonProvides an accessible name for the draggable button.
id="[]".pf-c-data-list__item-draggable-button, .pf-c-data-list__cell-textGives the button and the text element accessible IDs

Usage

ClassApplied toOutcome
.pf-c-data-list__item-draggable-button<button>Initiates the draggable button. Use for drag and drop.
.pf-c-data-list__item-draggable-icon<span>Initiates the draggable button icon.
.pf-m-draggable.pf-c-data-list__itemModifies a data list item so that it is draggable.
.pf-m-ghost-row.pf-c-data-list__item.pf-m-draggableModifies a draggable data list item to be the ghost row.
.pf-m-disabled.pf-c-data-list__item.pf-m-draggableModifies a data list draggable item for the disabled state.

Text modifiers

  • 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.org
    This 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.org
    http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org
    http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org
    http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org
    This 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.

Text modifiers data list text

  • This text will wrap to the next line because it has the default behavior of the data list cell. This is data list text, you can apply `pf-m-truncate` directly to the text. This is data list text, you can apply `pf-m-truncate` directly to the text.
    This text will wrap to the next line because it has the default behavior of the data list cell. http://thisisaverylongdatalisttextthatneedstobreakusethebreakwordmodifier.org
    This text will wrap to the next line because it has the default behavior of the data list cell. This is data list text, you can apply `pf-m-nowrap` directly to the text.

Usage

ClassApplied toOutcome
.pf-c-data-list__text*Inserts the data list text element. Use this class to modify specific text directly.
.pf-m-truncate.pf-c-data-list, .pf-c-data-list__item-row, .pf-c-data-list__cell, .pf-c-data-list__textModifies the data list element so that text is truncated.
.pf-m-break-word.pf-c-data-list, .pf-c-data-list__item-row, .pf-c-data-list__cell, .pf-c-data-list__textModifies the data list element so that text breaks to the next line.
.pf-m-nowrap.pf-c-data-list, .pf-c-data-list__item-row, .pf-c-data-list__cell, .pf-c-data-list__textModifies the data list element so that text does not wrap to the next line.

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.

Grid

  • Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6
  • Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6

Grid (small breakpoint)

  • Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6
  • Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6

Grid none

  • Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6
  • Cell 1
    Cell 2
    Cell 3
    Cell 4
    Cell 5
    Cell 6

Usage

ClassApplied toOutcome
.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}.pf-c-data-listModifies 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.

CSS variables

.pf-c-data-list--pf-global--Color--100
#151515
.pf-c-data-list--pf-global--Color--200
#6a6e73
.pf-c-data-list--pf-global--BorderColor--100
#d2d2d2
.pf-c-data-list--pf-global--primary-color--100
#06c
.pf-c-data-list--pf-global--link--Color
#06c
.pf-c-data-list--pf-global--link--Color--hover
#004080
.pf-c-data-list--pf-global--BackgroundColor--100
#fff
.pf-c-data-list--pf-c-data-list--BorderTopColor
#f0f0f0
.pf-c-data-list--pf-c-data-list--BorderTopWidth
0.5rem
.pf-c-data-list--pf-c-data-list--sm--BorderTopWidth
1px
.pf-c-data-list--pf-c-data-list--sm--BorderTopColor
#d2d2d2
.pf-c-data-list--pf-c-data-list__item--BackgroundColor
#fff
.pf-c-data-list--pf-c-data-list__item--m-selected--ZIndex
100
.pf-c-data-list--pf-c-data-list__item--m-expanded--before--BackgroundColor
#06c
.pf-c-data-list--pf-c-data-list__item--m-selected--before--BackgroundColor
#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--pf-c-data-list__item--m-selectable--OutlineOffset
calc(-1 * 0.25rem)
.pf-c-data-list--pf-c-data-list__item--m-selectable--hover--ZIndex
calc(100 + 1)
.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--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--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--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor
#73bcf7
.pf-c-data-list--pf-c-data-list__item--BorderBottomColor
#f0f0f0
.pf-c-data-list--pf-c-data-list__item--BorderBottomWidth
0.5rem
.pf-c-data-list--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor
#f0f0f0
.pf-c-data-list--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth
0.5rem
.pf-c-data-list--pf-c-data-list__item--sm--BorderBottomWidth
1px
.pf-c-data-list--pf-c-data-list__item--sm--BorderBottomColor
#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--pf-c-data-list__item--before--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-data-list--pf-c-data-list__item--before--Top
0
.pf-c-data-list--pf-c-data-list__item--before--sm--Top
calc(0.5rem * -1)
.pf-c-data-list--pf-c-data-list__item-row--PaddingRight
1rem
.pf-c-data-list--pf-c-data-list__item-row--PaddingLeft
1rem
.pf-c-data-list--pf-c-data-list__item-row--xl--PaddingRight
1.5rem
.pf-c-data-list--pf-c-data-list__item-row--xl--PaddingLeft
1.5rem
.pf-c-data-list--pf-c-data-list__item-content--md--PaddingBottom
1.5rem
.pf-c-data-list--pf-c-data-list__cell--PaddingTop
1.5rem
.pf-c-data-list--pf-c-data-list__cell--PaddingBottom
1.5rem
.pf-c-data-list--pf-c-data-list__cell--MarginRight
2rem
.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--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--pf-c-data-list__cell--m-icon--cell--PaddingTop
1.5rem
.pf-c-data-list--pf-c-data-list--cell--MinWidth
initial
.pf-c-data-list--pf-c-data-list--cell--Overflow
visible
.pf-c-data-list--pf-c-data-list--cell--TextOverflow
clip
.pf-c-data-list--pf-c-data-list--cell--WhiteSpace
normal
.pf-c-data-list--pf-c-data-list--cell--WordBreak
normal
.pf-c-data-list--pf-c-data-list--cell--m-truncate--MinWidth
5ch
.pf-c-data-list--pf-c-data-list__toggle--MarginLeft
calc(0.5rem * -1)
.pf-c-data-list--pf-c-data-list__toggle--MarginTop
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-icon--Rotate
90deg
.pf-c-data-list--pf-c-data-list__item-draggable-button--PaddingLeft
1rem
.pf-c-data-list--pf-c-data-list__item-draggable-button--PaddingRight
1rem
.pf-c-data-list--pf-c-data-list__item-draggable-button--MarginTop
calc(0.5rem * -1)
.pf-c-data-list--pf-c-data-list__item-draggable-button--MarginLeft
calc(1rem * -1)
.pf-c-data-list--pf-c-data-list__item-draggable-button-icon--Color
#6a6e73
.pf-c-data-list--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color
#d2d2d2
.pf-c-data-list--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color
#151515
.pf-c-data-list--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color
#151515
.pf-c-data-list--pf-c-data-list__item--m-ghost-row--after--BackgroundColor
#fff
.pf-c-data-list--pf-c-data-list__item--m-ghost-row--after--Opacity
.6
.pf-c-data-list--pf-c-data-list__item-control--PaddingTop
1.5rem
.pf-c-data-list--pf-c-data-list__item-control--PaddingBottom
1.5rem
.pf-c-data-list--pf-c-data-list__item-control--MarginRight
1rem
.pf-c-data-list--pf-c-data-list__item-control--md--MarginRight
2rem
.pf-c-data-list--pf-c-data-list__item-control--not-last-child--MarginRight
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--pf-c-data-list__item-action--PaddingBottom
1.5rem
.pf-c-data-list--pf-c-data-list__item-action--MarginLeft
1rem
.pf-c-data-list--pf-c-data-list__item-action--md--MarginLeft
2rem
.pf-c-data-list--pf-c-data-list__item-action--not-last-child--MarginRight
1rem
.pf-c-data-list--pf-c-data-list__action--MarginTop
calc(0.375rem * -1)
.pf-c-data-list--pf-c-data-list__expandable-content--BorderTopWidth
1px
.pf-c-data-list--pf-c-data-list__expandable-content--BorderTopColor
#d2d2d2
.pf-c-data-list--pf-c-data-list__expandable-content--MarginRight
calc(1rem * -1)
.pf-c-data-list--pf-c-data-list__expandable-content--MarginLeft
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--pf-c-data-list__expandable-content-body--PaddingTop
1rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--PaddingRight
1rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--PaddingBottom
1rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--PaddingLeft
1rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--md--PaddingTop
1.5rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--xl--PaddingRight
1.5rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--md--PaddingBottom
1.5rem
.pf-c-data-list--pf-c-data-list__expandable-content-body--xl--PaddingLeft
1.5rem
.pf-c-data-list--pf-c-data-list--m-compact--FontSize
0.875rem
.pf-c-data-list--pf-c-data-list--m-compact__check--FontSize
1rem
.pf-c-data-list--pf-c-data-list--m-compact__cell--PaddingTop
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__cell--PaddingBottom
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--pf-c-data-list--m-compact__cell--cell--MarginRight
1rem
.pf-c-data-list--pf-c-data-list--m-compact__item-control--PaddingTop
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--pf-c-data-list--m-compact__item-action--PaddingTop
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__item-action--PaddingBottom
0.5rem
.pf-c-data-list--pf-c-data-list--m-compact__item-action--MarginLeft
1rem
.pf-c-data-list--pf-c-data-list--m-compact__item-content--PaddingBottom
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-c-data-list__item-action--pf-hidden-visible--Visibility
visible
.pf-c-data-list__item-action--pf-hidden-visible--visible--Display
flex
.pf-m-hidden.pf-c-data-list__item-action--pf-hidden-visible--Display
none
.pf-m-hidden.pf-c-data-list__item-action--pf-hidden-visible--Visibility
hidden
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-action--MarginLeft
1rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-action--PaddingTop
0.5rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-action--PaddingBottom
0.5rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-control--MarginRight
1rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__item-control--PaddingTop
0.5rem
.pf-c-data-list.pf-m-compact--pf-c-data-list__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.pf-m-compact .pf-c-data-list__cell--pf-c-data-list__cell--PaddingTop
0.5rem
.pf-c-data-list.pf-m-compact .pf-c-data-list__cell--pf-c-data-list__cell--PaddingBottom
0.5rem
.pf-c-data-list.pf-m-compact .pf-c-data-list__cell--pf-c-data-list__cell--MarginRight
1rem
.pf-c-data-list.pf-m-compact .pf-c-data-list__cell--pf-c-data-list__cell--cell--PaddingTop
0
.pf-c-data-list.pf-m-truncate--pf-c-data-list--cell--MinWidth
5ch
.pf-c-data-list.pf-m-truncate--pf-c-data-list--cell--Overflow
hidden
.pf-c-data-list.pf-m-truncate--pf-c-data-list--cell--TextOverflow
ellipsis
.pf-c-data-list.pf-m-truncate--pf-c-data-list--cell--WhiteSpace
nowrap
.pf-c-data-list.pf-m-break-word--pf-c-data-list--cell--WordBreak
break-word
.pf-c-data-list.pf-m-nowrap--pf-c-data-list--cell--WhiteSpace
nowrap
.pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child)--pf-c-data-list__item--BorderBottomWidth
0
.pf-c-data-list__item.pf-m-selected--pf-c-data-list__item--before--BackgroundColor
#06c
.pf-c-data-list__item.pf-m-expanded--pf-c-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--BackgroundColor
#73bcf7
.pf-c-data-list__item-draggable-button:hover--pf-c-data-list__item-draggable-button-icon--Color
#151515
.pf-c-data-list__item-draggable-button:focus--pf-c-data-list__item-draggable-button-icon--Color
#151515
.pf-c-data-list__item-draggable-button.pf-m-disabled--pf-c-data-list__item-draggable-button-icon--Color
#d2d2d2

View source on GitHub