HTML

Data list

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-listcell element. For example use `.pf-c-data-listicon`.
.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.

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<i>Initiates a toggle icon.
.pf-c-data-list__icon<i>Initiates a data list 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-table__itemModifies for expanded state.
.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-listcell element. Use `.pf-c-data-listicon`.

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

Overiew

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__action--MarginTopc_data_list__action_MarginTop
calc(0.375rem*-1)
--pf-c-data-list__cell-cell--MarginRightc_data_list__cell_cell_MarginRight
2rem
--pf-c-data-list__cell-cell--md--PaddingTopc_data_list__cell_cell_md_PaddingTop
1.5rem
--pf-c-data-list__cell-cell--PaddingTopc_data_list__cell_cell_PaddingTop
0
--pf-c-data-list__cell--m-icon--MarginRightc_data_list__cell_m_icon_MarginRight
1rem
--pf-c-data-list__cell--md--PaddingBottomc_data_list__cell_md_PaddingBottom
0
--pf-c-data-list__cell--PaddingBottomc_data_list__cell_PaddingBottom
1.5rem
--pf-c-data-list__cell--PaddingTopc_data_list__cell_PaddingTop
1.5rem
--pf-c-data-list__expandable-content-body--md--PaddingBottomc_data_list__expandable_content_body_md_PaddingBottom
1rem
--pf-c-data-list__expandable-content-body--md--PaddingLeftc_data_list__expandable_content_body_md_PaddingLeft
1rem
--pf-c-data-list__expandable-content-body--md--PaddingRightc_data_list__expandable_content_body_md_PaddingRight
1rem
--pf-c-data-list__expandable-content-body--md--PaddingTopc_data_list__expandable_content_body_md_PaddingTop
1rem
--pf-c-data-list__expandable-content-body--PaddingBottomc_data_list__expandable_content_body_PaddingBottom
1.5rem
--pf-c-data-list__expandable-content-body--PaddingLeftc_data_list__expandable_content_body_PaddingLeft
1.5rem
--pf-c-data-list__expandable-content-body--PaddingRightc_data_list__expandable_content_body_PaddingRight
1.5rem
--pf-c-data-list__expandable-content-body--PaddingTopc_data_list__expandable_content_body_PaddingTop
1.5rem
--pf-c-data-list__expandable-content--BorderTopColorc_data_list__expandable_content_BorderTopColor
#d2d2d2
--pf-c-data-list__expandable-content--BoxShadowc_data_list__expandable_content_BoxShadow
0 0.3125rem 0.625rem -0.25rem rgba(3,3,3,0.25)
--pf-c-data-list__expandable-content--MarginLeftc_data_list__expandable_content_MarginLeft
calc(1.5rem*-1)
--pf-c-data-list__expandable-content--MarginRightc_data_list__expandable_content_MarginRight
calc(1.5rem*-1)
--pf-c-data-list__expandable-content--md--MaxHeightc_data_list__expandable_content_md_MaxHeight
37.5rem
--pf-c-data-list__item-action--Displayc_data_list__item_action_Display
flex
--pf-c-data-list__item-action--MarginLeftc_data_list__item_action_MarginLeft
2rem
--pf-c-data-list__item-action--md--MarginLeftc_data_list__item_action_md_MarginLeft
1rem
--pf-c-data-list__item-action--not-last-child--lg--MarginBottomc_data_list__item_action_not_last_child_lg_MarginBottom
1rem
--pf-c-data-list__item-action--not-last-child--MarginRightc_data_list__item_action_not_last_child_MarginRight
1rem
--pf-c-data-list__item-action--PaddingBottomc_data_list__item_action_PaddingBottom
1.5rem
--pf-c-data-list__item-action--PaddingTopc_data_list__item_action_PaddingTop
1.5rem
--pf-c-data-list__item--before--BackgroundColorc_data_list__item_before_BackgroundColor
#06c
--pf-c-data-list__item--before--Heightc_data_list__item_before_Height
initial
--pf-c-data-list__item--before--Topc_data_list__item_before_Top
0
--pf-c-data-list__item--before--Transitionc_data_list__item_before_Transition
all 250ms ease-in-out
--pf-c-data-list__item--before--Widthc_data_list__item_before_Width
3px
--pf-c-data-list__item--before--ZIndexc_data_list__item_before_ZIndex
500
--pf-c-data-list__item-content--PaddingBottomc_data_list__item_content_PaddingBottom
1.5rem
--pf-c-data-list__item-control--MarginRightc_data_list__item_control_MarginRight
2rem
--pf-c-data-list__item-control--md--MarginRightc_data_list__item_control_md_MarginRight
1rem
--pf-c-data-list__item-control--not-last-child--MarginRightc_data_list__item_control_not_last_child_MarginRight
1rem
--pf-c-data-list__item-control--PaddingBottomc_data_list__item_control_PaddingBottom
1.5rem
--pf-c-data-list__item-control--PaddingTopc_data_list__item_control_PaddingTop
1.5rem
--pf-c-data-list__item-item--before--Heightc_data_list__item_item_before_Height
initial
--pf-c-data-list__item-item--before--Topc_data_list__item_item_before_Top
calc(1px*-1)
--pf-c-data-list__item-item--BorderTopColorc_data_list__item_item_BorderTopColor
#d2d2d2
--pf-c-data-list__item-item--BorderTopWidthc_data_list__item_item_BorderTopWidth
1px
--pf-c-data-list__item-item--sm--BorderTopColorc_data_list__item_item_sm_BorderTopColor
#ededed
--pf-c-data-list__item-item--sm--BorderTopWidthc_data_list__item_item_sm_BorderTopWidth
0.5rem
--pf-c-data-list__item--m-expanded__expandable-content--BorderTopWidthc_data_list__item_m_expanded__expandable_content_BorderTopWidth
1px
--pf-c-data-list__item--m-expanded__toggle--c-button-icon--Transformc_data_list__item_m_expanded__toggle_c_button_icon_Transform
rotate(90deg)
--pf-c-data-list__item--m-expanded--before--BackgroundColorc_data_list__item_m_expanded_before_BackgroundColor
#06c
--pf-c-data-list__item-row--md--PaddingLeftc_data_list__item_row_md_PaddingLeft
1rem
--pf-c-data-list__item-row--md--PaddingRightc_data_list__item_row_md_PaddingRight
1rem
--pf-c-data-list__item-row--PaddingLeftc_data_list__item_row_PaddingLeft
1.5rem
--pf-c-data-list__item-row--PaddingRightc_data_list__item_row_PaddingRight
1.5rem
--pf-c-data-list__toggle-icon--Transitionc_data_list__toggle_icon_Transition
.2s ease-in 0s
--pf-c-data-list__toggle--MarginLeftc_data_list__toggle_MarginLeft
calc(0.5rem*-1)
--pf-c-data-list__toggle--MarginTopc_data_list__toggle_MarginTop
calc(0.375rem*-1)
--pf-c-data-list--BackgroundColorc_data_list_BackgroundColor
#fff
--pf-c-data-list--BorderBottomColorc_data_list_BorderBottomColor
#d2d2d2
--pf-c-data-list--BorderBottomWidthc_data_list_BorderBottomWidth
0
--pf-c-data-list--BorderTopColorc_data_list_BorderTopColor
#d2d2d2
--pf-c-data-list--BorderTopWidthc_data_list_BorderTopWidth
1px
--pf-c-data-list--sm--BorderTopColorc_data_list_sm_BorderTopColor
#ededed
--pf-c-data-list--sm--BorderTopWidthc_data_list_sm_BorderTopWidth
0.5rem