HTML

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

Data list simple

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

Data list checkboxes, actions and additional cells

  • Primary content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
    Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
    Tertiary Content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
    More Content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
    More Content Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
  • Primary content - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
    Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Copied to clipboard

Data list 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.
Copied to clipboard

Data list width modifiers

Default fitting - example 1

  • default

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    default

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

Flex modifiers - example 2

  • .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.
Copied to clipboard

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--BackgroundColorc_data_list_BackgroundColor#fff
--pf-c-data-list--BorderBottomColorc_data_list_BorderBottomColor#d2d2d2
--pf-c-data-list--BorderBottomWidthc_data_list_BorderBottomWidth1px
--pf-c-data-list--BorderTopColorc_data_list_BorderTopColor#d2d2d2
--pf-c-data-list--BorderTopWidthc_data_list_BorderTopWidth1px
--pf-c-data-list__action--MarginTopc_data_list__action_MarginTopcalc(0.375rem * -1)
--pf-c-data-list__cell--PaddingBottomc_data_list__cell_PaddingBottom2rem
--pf-c-data-list__cell--PaddingTopc_data_list__cell_PaddingTop2rem
--pf-c-data-list__cell-cell--MarginRightc_data_list__cell_cell_MarginRight2rem
--pf-c-data-list__cell-cell--PaddingTopc_data_list__cell_cell_PaddingTop0
--pf-c-data-list__cell-cell--md--PaddingTopc_data_list__cell_cell_md_PaddingTop2rem
--pf-c-data-list__cell--m-icon--MarginRightc_data_list__cell_m_icon_MarginRight1rem
--pf-c-data-list__cell--md--PaddingBottomc_data_list__cell_md_PaddingBottom0
--pf-c-data-list__expandable-content--BorderTopColorc_data_list__expandable_content_BorderTopColor#ededed
--pf-c-data-list__expandable-content--BoxShadowc_data_list__expandable_content_BoxShadow0 0.3125rem 0.625rem -0.25rem rgba(3,3,3,.25)
--pf-c-data-list__expandable-content--MarginLeftc_data_list__expandable_content_MarginLeftcalc(2rem * -1)
--pf-c-data-list__expandable-content--MarginRightc_data_list__expandable_content_MarginRightcalc(2rem * -1)
--pf-c-data-list__expandable-content-body--PaddingBottomc_data_list__expandable_content_body_PaddingBottom2rem
--pf-c-data-list__expandable-content-body--PaddingLeftc_data_list__expandable_content_body_PaddingLeft2rem
--pf-c-data-list__expandable-content-body--PaddingRightc_data_list__expandable_content_body_PaddingRight2rem
--pf-c-data-list__expandable-content-body--PaddingTopc_data_list__expandable_content_body_PaddingTop2rem
--pf-c-data-list__expandable-content-body--md--PaddingBottomc_data_list__expandable_content_body_md_PaddingBottom1rem
--pf-c-data-list__expandable-content-body--md--PaddingLeftc_data_list__expandable_content_body_md_PaddingLeft1rem
--pf-c-data-list__expandable-content-body--md--PaddingRightc_data_list__expandable_content_body_md_PaddingRight1rem
--pf-c-data-list__expandable-content-body--md--PaddingTopc_data_list__expandable_content_body_md_PaddingTop1rem
--pf-c-data-list__expandable-content--md--MaxHeightc_data_list__expandable_content_md_MaxHeight37.5rem
--pf-c-data-list__item-action--MarginLeftc_data_list__item_action_MarginLeft2rem
--pf-c-data-list__item-action--PaddingBottomc_data_list__item_action_PaddingBottom2rem
--pf-c-data-list__item-action--PaddingTopc_data_list__item_action_PaddingTop2rem
--pf-c-data-list__item-action--md--MarginLeftc_data_list__item_action_md_MarginLeft1rem
--pf-c-data-list__item-action--not-last-child--MarginRightc_data_list__item_action_not_last_child_MarginRight1rem
--pf-c-data-list__item-action--not-last-child--lg--MarginBottomc_data_list__item_action_not_last_child_lg_MarginBottom1rem
--pf-c-data-list__item--before--BackgroundColorc_data_list__item_before_BackgroundColor#06c
--pf-c-data-list__item--before--Heightc_data_list__item_before_Heightcalc(100% + 1px)
--pf-c-data-list__item--before--Topc_data_list__item_before_Topcalc(1px * -1)
--pf-c-data-list__item--before--Transitionc_data_list__item_before_Transitionall 250ms cubic-bezier(0.42,0,0.58,1)
--pf-c-data-list__item--before--Widthc_data_list__item_before_Width3px
--pf-c-data-list__item--before--ZIndexc_data_list__item_before_ZIndex500
--pf-c-data-list__item-content--PaddingBottomc_data_list__item_content_PaddingBottom2rem
--pf-c-data-list__item-control--MarginRightc_data_list__item_control_MarginRight2rem
--pf-c-data-list__item-control--PaddingBottomc_data_list__item_control_PaddingBottom2rem
--pf-c-data-list__item-control--PaddingTopc_data_list__item_control_PaddingTop2rem
--pf-c-data-list__item-control--md--MarginRightc_data_list__item_control_md_MarginRight1rem
--pf-c-data-list__item-control--not-last-child--MarginRightc_data_list__item_control_not_last_child_MarginRight1rem
--pf-c-data-list__item-item--BorderTopColorc_data_list__item_item_BorderTopColor#d2d2d2
--pf-c-data-list__item-item--BorderTopWidthc_data_list__item_item_BorderTopWidth1px
--pf-c-data-list__item-item--before--Heightc_data_list__item_item_before_Heightcalc(100% + 1px)
--pf-c-data-list__item-item--before--Topc_data_list__item_item_before_Topcalc(1px * -1)
--pf-c-data-list__item-item--sm--BorderTopWidthc_data_list__item_item_sm_BorderTopWidth0.5rem
--pf-c-data-list__item--m-expanded__expandable-content--BorderTopWidthc_data_list__item_m_expanded__expandable_content_BorderTopWidth1px
--pf-c-data-list__item--m-expanded__toggle--c-button--Transformc_data_list__item_m_expanded__toggle_c_button_Transformrotate(90deg)
--pf-c-data-list__item--m-expanded--before--BackgroundColorc_data_list__item_m_expanded_before_BackgroundColor#06c
--pf-c-data-list__item-row--PaddingLeftc_data_list__item_row_PaddingLeft2rem
--pf-c-data-list__item-row--PaddingRightc_data_list__item_row_PaddingRight2rem
--pf-c-data-list__item-row--md--PaddingLeftc_data_list__item_row_md_PaddingLeft1rem
--pf-c-data-list__item-row--md--PaddingRightc_data_list__item_row_md_PaddingRight1rem
--pf-c-data-list__toggle--MarginLeftc_data_list__toggle_MarginLeftcalc(0.5rem * -1)
--pf-c-data-list__toggle--MarginTopc_data_list__toggle_MarginTopcalc(0.375rem * -1)
--pf-c-data-list__toggle--c-button--Transformc_data_list__toggle_c_button_Transformrotate(90deg)
--pf-c-data-list__toggle--c-button--Transitionc_data_list__toggle_c_button_Transitionall 250ms cubic-bezier(0.42,0,0.58,1)
--pf-c-data-list--sm--BorderTopWidthc_data_list_sm_BorderTopWidth0.5rem