PF Next

Data List Simple

Preview

  • Primary content
    Secondary content
  • Second list item title
    Secondary content
<ul class="pf-c-data-list pf-u-box-shadow-md" role="list" aria-label="Simple data list example">
  <li class="pf-c-data-list__item" aria-labelledby="simple-item1">
    <div class="pf-c-data-list__cell">
      <span id="simple-item1">Primary content</span>
    </div>
    <div class="pf-c-data-list__cell">
      Secondary content
    </div>
  </li>
  <li class="pf-c-data-list__item" aria-labelledby="simple-item2">
    <div class="pf-c-data-list__cell">
      <span id="simple-item2">Second list item title</span>
    </div>
    <div class="pf-c-data-list__cell">
      Secondary content
    </div>
  </li>
</ul>

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__cell * Initiates a data list content cell. Required

Data List Checkboxes, Actions and Additional Cells

Preview

  • Primary content
    Secondary content
  • Primary content - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
    Secondary content
<ul class="pf-c-data-list pf-u-box-shadow-md" role="list" aria-label="Checkbox and action data list example">
  <li class="pf-c-data-list__item" aria-labelledby="check-action-item1">
    <div class="pf-c-data-list__check">
      <input class="pf-c-check__input" type="checkbox" name="check-action-check1" aria-labelledby="check-action-item1">
    </div>
    <div class="pf-c-data-list__cell">
      <span id='check-action-item1'>Primary content</span>
    </div>
    <div class="pf-c-data-list__cell">
      Secondary content
    </div>
    <div class="pf-c-data-list__action">
      <button class="pf-c-button pf-m-plain" aria-labelledby="check-action-item1 check-action-action1" id="check-action-action1" aria-label="Actions">
        <i class="fas fa-ellipsis-v"></i>
      </button>
    </div>
  </li>
  <li class="pf-c-data-list__item" aria-labelledby="check-action-item2">
    <div class="pf-c-data-list__check">
      <input class="pf-c-check__input" type="checkbox" name="check-action-check2" aria-labelledby="check-action-item2">
    </div>
    <div class="pf-c-data-list__cell">
      <span id='check-action-item2'>Primary content - Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
    </div>
    <div class="pf-c-data-list__cell">
      Secondary content
    </div>
    <div class="pf-c-data-list__action">
      <button class="pf-c-button pf-m-plain" aria-labelledby="check-action-item2 check-action-action2" id="check-action-action2" aria-label="Actions">
        <i class="fas fa-ellipsis-v"></i>
      </button>
    </div>
  </li>
</ul>

Data List Checkbox/Action Button Notes

All simple data list accessibility and usage requirements apply.

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__check <div> Initiates a data list check cell. Required
.pf-c-data-list__action <div> Initiates a data list action button cell. Required

Data List Expandable

Preview

  • Primary content
    link
    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.

  • Primary content
    Lorem ipsum dolor sit amet.
<ul class="pf-c-data-list pf-u-box-shadow-md" role="list" aria-label="Expandable data list example">
  <li class="pf-c-data-list__item pf-m-expanded" aria-labelledby="ex-item1">
    <div class="pf-c-data-list__toggle">
      <button class="pf-c-button pf-m-plain" aria-labelledby="ex-toggle1 ex-item1" id="ex-toggle1" aria-label="Toggle details for" aria-expanded="true">
        <i class="fas fa-angle-right"></i>
      </button>
    </div>
    <div class="pf-c-data-list__check">
      <input class="pf-c-check__input" type="checkbox" name="ex-check1" aria-labelledby="ex-item1">
    </div>
    <div class="pf-c-data-list__cell">
      <div id="ex-item1">Primary content</div>
      <a href="#">link</a>
    </div>
    <div class="pf-c-data-list__cell">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </div>
    <div class="pf-c-data-list__action">
      <button class="pf-c-button pf-m-plain" aria-labelledby="ex-item1 ex-action1" id="ex-action1" aria-label="Actions">
        <i class="fas fa-ellipsis-v"></i>
      </button>
    </div>
    <section class="pf-c-data-list__expandable-content" aria-label="Primary Content Details">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </section>
  </li>
  <li class="pf-c-data-list__item" aria-labelledby="ex-item2">
    <div class="pf-c-data-list__toggle">
      <button class="pf-c-button pf-m-plain" aria-labelledby="ex-toggle2 ex-item2" id="ex-toggle2" aria-label="Toggle details for" aria-expanded="false">
        <i class="fas fa-angle-right"></i>
      </button>
    </div>
    <div class="pf-c-data-list__check">
      <input class="pf-c-check__input" type="checkbox" name="ex-check2" aria-labelledby="ex-item2">
    </div>
    <div class="pf-c-data-list__cell">
      <div id="ex-item2">Primary content</div>
    </div>
    <div class="pf-c-data-list__cell">
      <span>Lorem ipsum dolor sit amet.</span>
    </div>
    <div class="pf-c-data-list__action">
      <button class="pf-c-button pf-m-plain" aria-labelledby="ex-item2 ex-action2" id="ex-action2" aria-label="Actions">
        <i class="fas fa-ellipsis-v"></i>
      </button>
    </div>
    <section class="pf-c-data-list__expandable-content" aria-label="Primary Content Details" hidden>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </section>
  </li>
</ul>

Data List Expandable Notes

All simple data list accessibility and usage requirements apply.
All data list checkbox/action button accessibility and usage requirements apply.

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

Usage

Class Applied To Outcome
.pf-c-data-list__toggle <div> Initiates a toggle button.
.pf-m-expanded .pf-c-table__item Modifies for expanded state.

Data List Width Modifiers

Preview

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.

    default

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

<h2 class="Preview__section-title">Default fitting - example 1</h2>
<ul class="pf-c-data-list pf-u-box-shadow-md" role="list" aria-label="Width modifier data list example 1">
  <li class="pf-c-data-list__item" aria-labelledby="width-ex1-item1">
    <div class="pf-c-data-list__check">
      <input class="pf-c-check__input" type="checkbox" name="width-ex1-check1" aria-labelledby="width-ex1-item1">
    </div>
    <div class="pf-c-data-list__cell">
      <div class="Preview__placeholder">
        <b id="width-ex1-item1">default</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="pf-c-data-list__cell">
      <div class="Preview__placeholder">
        <b>default</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </li>
</ul>
<h2 class="Preview__section-title">Flex modifiers - example 2</h2>
<ul class="pf-c-data-list pf-u-box-shadow-md" role="list" aria-label="Width modifier data list example 2">
  <li class="pf-c-data-list__item" aria-labelledby="width-ex2-item1">
    <div class="pf-c-data-list__check">
      <input class="pf-c-check__input" type="checkbox" name="width-ex2-check1" aria-labelledby="width-ex2-item1">
    </div>
    <div class="pf-c-data-list__cell pf-m-flex-2">
      <div class="Preview__placeholder">
        <b id="width-ex2-item1">.pf-m-flex-2</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
      </div>
    </div>
    <div class="pf-c-data-list__cell pf-m-flex-4">
      <div class="Preview__placeholder">
        <b>.pf-m-flex-4</b>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
    <div class="pf-c-data-list__action">
      <button class="pf-c-button pf-m-plain" aria-labelledby="width-ex2-item1 width-ex2-action1" id="width-ex2-action1" aria-label="Actions">
        <i class="fas fa-ellipsis-v"></i>
      </button>
    </div>
  </li>
</ul>
<h2 class="Preview__section-title">Flex modifiers - example 3</h2>
<ul class="pf-c-data-list pf-u-box-shadow-md" role="list" aria-label="Width modifier data list example 3">
  <li class="pf-c-data-list__item pf-m-expanded" aria-labelledby="width-ex3-item1">
    <div class="pf-c-data-list__toggle">
      <button class="pf-c-button pf-m-plain" aria-labelledby="width-ex3-toggle1 width-ex3-item1" id="width-ex3-toggle1" aria-label="Toggle details for" aria-expanded="true">
        <i class="fas fa-angle-right"></i>
      </button>
    </div>
    <div class="pf-c-data-list__check">
      <input class="pf-c-check__input" type="checkbox" name="width-ex3-check1" aria-labelledby="width-ex3-item1">
    </div>
    <div class="pf-c-data-list__cell pf-m-flex-5">
      <div class="Preview__placeholder">
        <b id="width-ex3-item1">.pf-m-flex-5</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="pf-c-data-list__cell pf-m-flex-2">
      <div class="Preview__placeholder">
        <b>.pf-m-flex-2</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="pf-c-data-list__cell">
      <div class="Preview__placeholder">default</div>
    </div>
    <div class="pf-c-data-list__action">
      <button class="pf-c-button pf-m-plain" aria-labelledby="width-ex3-item1 width-ex3-action1" id="width-ex3-action1" aria-label="Actions">
        <i class="fas fa-ellipsis-v"></i>
      </button>
    </div>
    <section class="pf-c-data-list__expandable-content" aria-label="Primary Content Details">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </section>
  </li>
</ul>

Data List Width Notes

All simple data list accessibility and usage requirements apply.
All data list checkbox/action button accessibility and usage requirements apply.
All expandable data list accessibility and usage requirements apply.

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.

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.