@patternfly/patternfly
Version:
Assets, source, tooling, and content for PatternFly 4
1,049 lines (1,043 loc) • 98.1 kB
Markdown
---
id: Data list
section: demos
wrapperTag: div
---
## Demos
### Simple
```html isFullscreen
<div class="pf-c-page" id="page-layout-data-list-simple">
<a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content-page-layout-data-list-simple">Skip to content</a>
<header class="pf-c-page__header">
<div class="pf-c-page__header-brand">
<div class="pf-c-page__header-brand-toggle">
<button class="pf-c-button pf-m-plain" type="button" id="page-layout-data-list-simple-nav-toggle" aria-label="Global navigation" aria-expanded="true" aria-controls="page-layout-data-list-simple-primary-nav">
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
</div>
<a href="#" class="pf-c-page__header-brand-link">
<img class="pf-c-brand" src="/assets/images/PF-Masthead-Logo.svg" alt="PatternFly logo" />
</a>
</div>
<div class="pf-c-page__header-tools">
<div class="pf-c-page__header-tools-group">
<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg">
<button class="pf-c-button pf-m-plain" type="button" aria-label="Settings">
<i class="fas fa-cog" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg">
<button class="pf-c-button pf-m-plain" type="button" aria-label="Help">
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-c-page__header-tools-group">
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
<div class="pf-c-dropdown">
<button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-data-list-simple-dropdown-kebab-right-aligned-1-button" aria-expanded="false" aria-label="Actions">
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
<ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="page-layout-data-list-simple-dropdown-kebab-right-aligned-1-button" hidden>
<li>
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
</li>
<li>
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
</li>
<li>
<a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a>
</li>
<li>
<button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button>
</li>
<li class="pf-c-divider" role="separator"></li>
<li>
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
</li>
</ul>
</div>
</div>
<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-dropdown">
<button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-data-list-simple-dropdown-button" aria-expanded="false">
<span class="pf-c-dropdown__toggle-text">John Smith</span>
<span class="pf-c-dropdown__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
<div class="pf-c-dropdown__menu" hidden>[Panel contents here]</div>
</div>
</div>
</div>
<img class="pf-c-avatar" src="/assets/images/img_avatar.svg" alt="Avatar image" />
</div>
</header>
<div class="pf-c-page__sidebar">
<div class="pf-c-page__sidebar-body">
<nav class="pf-c-nav" id="page-layout-data-list-simple-primary-nav" aria-label="Global">
<ul class="pf-c-nav__list">
<li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
<button class="pf-c-nav__link" aria-expanded="true">Components
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section class="pf-c-nav__subnav" aria-labelledby="page-layout-data-list-simple-subnav-title1">
<h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-data-list-simple-subnav-title1">First nav item</h2>
<ul class="pf-c-nav__list">
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Forms</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Data table</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">Data list</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Icons</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Layouts</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">List</a>
</li>
</ul>
</section>
</li>
<li class="pf-c-nav__item pf-m-expandable">
<button class="pf-c-nav__link" aria-expanded="false">Patterns
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section class="pf-c-nav__subnav" aria-labelledby="page-layout-data-list-simple-subnav-title2" hidden>
<h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-data-list-simple-subnav-title2">Second nav item</h2>
<ul class="pf-c-nav__list"></ul>
</section>
</li>
<li class="pf-c-nav__item pf-m-expandable">
<button class="pf-c-nav__link" aria-expanded="false">Typography
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section class="pf-c-nav__subnav" aria-labelledby="page-layout-data-list-simple-subnav-title3" hidden>
<h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-data-list-simple-subnav-title3">Third nav item</h2>
<ul class="pf-c-nav__list"></ul>
</section>
</li>
<li class="pf-c-nav__item pf-m-expandable">
<button class="pf-c-nav__link" aria-expanded="false">Icons
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section class="pf-c-nav__subnav" aria-labelledby="page-layout-data-list-simple-subnav-title4" hidden>
<h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-data-list-simple-subnav-title4">Second nav item</h2>
<ul class="pf-c-nav__list"></ul>
</section>
</li>
<li class="pf-c-nav__item pf-m-expandable">
<button class="pf-c-nav__link" aria-expanded="false">Colors
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section class="pf-c-nav__subnav" aria-labelledby="page-layout-data-list-simple-subnav-title5" hidden>
<h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-data-list-simple-subnav-title5">Second nav item</h2>
<ul class="pf-c-nav__list"></ul>
</section>
</li>
</ul>
</nav>
</div>
</div>
<main class="pf-c-page__main" tabindex="-1" id="main-content-page-layout-data-list-simple">
<section class="pf-c-page__main-nav pf-m-light">
<nav class="pf-c-nav pf-m-tertiary" aria-label="Local">
<button class="pf-c-nav__scroll-button" disabled aria-label="Scroll left">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
<ul class="pf-c-nav__list">
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">Nav item 1</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Nav item 2</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Nav item 3</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Nav item 4</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Nav item 5</a>
</li>
</ul>
<button class="pf-c-nav__scroll-button" disabled aria-label="Scroll right">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</nav>
</section>
<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1>Data list</h1>
<p>Below is an example of a data list.</p>
</div>
</section>
<section class="pf-c-page__main-section pf-m-no-padding pf-m-padding-on-md">
<div class="pf-c-card">
<ul class="pf-c-data-list" role="list" aria-label="Simple data list example" id="page-layout-data-list-simple-data-list">
<li class="pf-c-data-list__item" aria-labelledby="page-layout-data-list-simple-data-list-item1">
<div class="pf-c-data-list__item-row">
<div class="pf-c-data-list__item-content">
<div class="pf-c-data-list__cell pf-m-align-left">
<div>
<div>
<p id='page-layout-data-list-simple-data-list-item1'>patternfly</p>
<small>Working repo for PatternFly 4
<a>https://pf4.patternfly.org/</a>
</small>
</div>
<div class="pf-l-flex pf-m-wrap">
<div>
<i class="fas fa-code-branch" aria-hidden="true"></i>
10
</div>
<div>
<i class="fas fa-code" aria-hidden="true"></i>
4
</div>
<div>
<i class="fas fa-cube" aria-hidden="true"></i>
5
</div>
<div>Updated 2 days ago</div>
</div>
</div>
</div>
<div class="pf-c-data-list__cell pf-m-align-right pf-m-no-fill">
<button class="pf-c-button pf-m-secondary" type="button">Secondary</button>
<button class="pf-c-button pf-m-link" type="button">Link button</button>
</div>
</div>
</div>
</li>
<li class="pf-c-data-list__item" aria-labelledby="page-layout-data-list-simple-data-list-item2">
<div class="pf-c-data-list__item-row">
<div class="pf-c-data-list__item-content">
<div class="pf-c-data-list__cell pf-m-align-left">
<div>
<div>
<p id='page-layout-data-list-simple-data-list-item2'>patternfly-elements</p>
<small>PatternFly elements</small>
</div>
<div class="pf-l-flex pf-m-wrap">
<div>
<i class="fas fa-code-branch" aria-hidden="true"></i>
5
</div>
<div>
<i class="fas fa-code" aria-hidden="true"></i>
9
</div>
<div>
<i class="fas fa-cube" aria-hidden="true"></i>
2
</div>
<div>
<i class="fas fa-check-circle" aria-hidden="true"></i>
11
</div>
<div>
<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
4
</div>
<div>
<i class="fas fa-times-circle" aria-hidden="true"></i>
1
</div>
<div>Updated 2 days ago</div>
</div>
</div>
</div>
<div class="pf-c-data-list__cell pf-m-align-right pf-m-no-fill">
<button class="pf-c-button pf-m-secondary" type="button">Secondary</button>
<button class="pf-c-button pf-m-link" type="button">Link button</button>
</div>
</div>
</div>
</li>
<li class="pf-c-data-list__item" aria-labelledby="page-layout-data-list-simple-data-list-item3">
<div class="pf-c-data-list__item-row">
<div class="pf-c-data-list__item-content">
<div class="pf-c-data-list__cell pf-m-align-left">
<p id='page-layout-data-list-simple-data-list-item3'>patternfly-unified-design-kit</p>
</div>
<div class="pf-c-data-list__cell pf-m-align-right pf-m-no-fill">
<button class="pf-c-button pf-m-secondary" type="button">Secondary</button>
<button class="pf-c-button pf-m-link" type="button">Link button</button>
</div>
</div>
</div>
</li>
<li class="pf-c-data-list__item" aria-labelledby="page-layout-data-list-simple-data-list-item4">
<div class="pf-c-data-list__item-row">
<div class="pf-c-data-list__item-content">
<div class="pf-c-data-list__cell pf-m-align-left">
<div>
<div>
<p id='page-layout-data-list-simple-data-list-item4'>patternfly</p>
<small>Working repo for PatternFly 4
<a>https://pf4.patternfly.org/</a>
</small>
</div>
<div class="pf-l-flex pf-m-wrap">
<div>
<i class="fas fa-code-branch" aria-hidden="true"></i>
10
</div>
<div>
<i class="fas fa-code" aria-hidden="true"></i>
4
</div>
<div>
<i class="fas fa-cube" aria-hidden="true"></i>
5
</div>
<div>Updated 2 days ago</div>
</div>
</div>
</div>
<div class="pf-c-data-list__cell pf-m-align-right pf-m-no-fill">
<button class="pf-c-button pf-m-secondary" type="button">Secondary</button>
<button class="pf-c-button pf-m-link" type="button">Link button</button>
</div>
</div>
</div>
</li>
<li class="pf-c-data-list__item" aria-labelledby="page-layout-data-list-simple-data-list-item5">
<div class="pf-c-data-list__item-row">
<div class="pf-c-data-list__item-content">
<div class="pf-c-data-list__cell pf-m-align-left">
<div>
<div>
<p id='page-layout-data-list-simple-data-list-item5'>patternfly-elements</p>
<small>PatternFly elements</small>
</div>
<div class="pf-l-flex pf-m-wrap">
<div>
<i class="fas fa-code-branch" aria-hidden="true"></i>
5
</div>
<div>
<i class="fas fa-code" aria-hidden="true"></i>
9
</div>
<div>
<i class="fas fa-cube" aria-hidden="true"></i>
2
</div>
<div>
<i class="fas fa-check-circle" aria-hidden="true"></i>
11
</div>
<div>
<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
4
</div>
<div>
<i class="fas fa-times-circle" aria-hidden="true"></i>
1
</div>
<div>Updated 2 days ago</div>
</div>
</div>
</div>
<div class="pf-c-data-list__cell pf-m-align-right pf-m-no-fill">
<button class="pf-c-button pf-m-secondary" type="button">Secondary</button>
<button class="pf-c-button pf-m-link" type="button">Link button</button>
</div>
</div>
</div>
</li>
</ul>
<div class="pf-c-pagination pf-m-bottom">
<div class="pf-c-options-menu">
<div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
<span class="pf-c-options-menu__toggle-text">
<b>1 - 10</b> of
<b>37</b>
</span>
<button class="pf-c-options-menu__toggle-button" id="{{page--id}}-pagination-options-menu-bottom-example-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Items per page">
<span class="pf-c-options-menu__toggle-button-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
</div>
<ul class="pf-c-options-menu__menu" aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle" hidden>
<li>
<button class="pf-c-options-menu__menu-item" type="button">5 per page</button>
</li>
<li>
<button class="pf-c-options-menu__menu-item" type="button">10 per page
<div class="pf-c-options-menu__menu-item-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</div>
</button>
</li>
<li>
<button class="pf-c-options-menu__menu-item" type="button">20 per page</button>
</li>
</ul>
</div>
<nav class="pf-c-pagination__nav" aria-label="Pagination">
<div class="pf-c-pagination__nav-control pf-m-first">
<button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to first page">
<i class="fas fa-angle-double-left" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-pagination__nav-control pf-m-prev">
<button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to previous page">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-pagination__nav-page-select">
<input class="pf-c-form-control" aria-label="Current page" type="number" min="1" max="4" value="1" />
<span aria-hidden="true">of 4</span>
</div>
<div class="pf-c-pagination__nav-control pf-m-next">
<button class="pf-c-button pf-m-plain" type="button" aria-label="Go to next page">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-pagination__nav-control pf-m-last">
<button class="pf-c-button pf-m-plain" type="button" aria-label="Go to last page">
<i class="fas fa-angle-double-right" aria-hidden="true"></i>
</button>
</div>
</nav>
</div>
</div>
</section>
</main>
</div>
```
### Actionable
```html isFullscreen
<div class="pf-c-page" id="page-layout-data-list-actionable">
<a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content-page-layout-data-list-actionable">Skip to content</a>
<header class="pf-c-page__header">
<div class="pf-c-page__header-brand">
<div class="pf-c-page__header-brand-toggle">
<button class="pf-c-button pf-m-plain" type="button" id="page-layout-data-list-actionable-nav-toggle" aria-label="Global navigation" aria-expanded="true" aria-controls="page-layout-data-list-actionable-primary-nav">
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
</div>
<a href="#" class="pf-c-page__header-brand-link">
<img class="pf-c-brand" src="/assets/images/PF-Masthead-Logo.svg" alt="PatternFly logo" />
</a>
</div>
<div class="pf-c-page__header-tools">
<div class="pf-c-page__header-tools-group">
<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg">
<button class="pf-c-button pf-m-plain" type="button" aria-label="Settings">
<i class="fas fa-cog" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg">
<button class="pf-c-button pf-m-plain" type="button" aria-label="Help">
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-c-page__header-tools-group">
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
<div class="pf-c-dropdown">
<button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-data-list-actionable-dropdown-kebab-right-aligned-1-button" aria-expanded="false" aria-label="Actions">
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
<ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="page-layout-data-list-actionable-dropdown-kebab-right-aligned-1-button" hidden>
<li>
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
</li>
<li>
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
</li>
<li>
<a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a>
</li>
<li>
<button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button>
</li>
<li class="pf-c-divider" role="separator"></li>
<li>
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
</li>
</ul>
</div>
</div>
<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-dropdown">
<button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-data-list-actionable-dropdown-button" aria-expanded="false">
<span class="pf-c-dropdown__toggle-text">John Smith</span>
<span class="pf-c-dropdown__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
<div class="pf-c-dropdown__menu" hidden>[Panel contents here]</div>
</div>
</div>
</div>
<img class="pf-c-avatar" src="/assets/images/img_avatar.svg" alt="Avatar image" />
</div>
</header>
<div class="pf-c-page__sidebar">
<div class="pf-c-page__sidebar-body">
<nav class="pf-c-nav" id="page-layout-data-list-actionable-primary-nav" aria-label="Global">
<ul class="pf-c-nav__list">
<li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
<button class="pf-c-nav__link" aria-expanded="true">Components
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section class="pf-c-nav__subnav" aria-labelledby="page-layout-data-list-actionable-subnav-title1">
<h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-data-list-actionable-subnav-title1">First nav item</h2>
<ul class="pf-c-nav__list">
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Forms</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Data table</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">Data list</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Icons</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Layouts</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">List</a>
</li>
</ul>
</section>
</li>
<li class="pf-c-nav__item pf-m-expandable">
<button class="pf-c-nav__link" aria-expanded="false">Patterns
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section class="pf-c-nav__subnav" aria-labelledby="page-layout-data-list-actionable-subnav-title2" hidden>
<h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-data-list-actionable-subnav-title2">Second nav item</h2>
<ul class="pf-c-nav__list"></ul>
</section>
</li>
<li class="pf-c-nav__item pf-m-expandable">
<button class="pf-c-nav__link" aria-expanded="false">Typography
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section class="pf-c-nav__subnav" aria-labelledby="page-layout-data-list-actionable-subnav-title3" hidden>
<h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-data-list-actionable-subnav-title3">Third nav item</h2>
<ul class="pf-c-nav__list"></ul>
</section>
</li>
<li class="pf-c-nav__item pf-m-expandable">
<button class="pf-c-nav__link" aria-expanded="false">Icons
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section class="pf-c-nav__subnav" aria-labelledby="page-layout-data-list-actionable-subnav-title4" hidden>
<h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-data-list-actionable-subnav-title4">Second nav item</h2>
<ul class="pf-c-nav__list"></ul>
</section>
</li>
<li class="pf-c-nav__item pf-m-expandable">
<button class="pf-c-nav__link" aria-expanded="false">Colors
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section class="pf-c-nav__subnav" aria-labelledby="page-layout-data-list-actionable-subnav-title5" hidden>
<h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-data-list-actionable-subnav-title5">Second nav item</h2>
<ul class="pf-c-nav__list"></ul>
</section>
</li>
</ul>
</nav>
</div>
</div>
<main class="pf-c-page__main" tabindex="-1" id="main-content-page-layout-data-list-actionable">
<section class="pf-c-page__main-nav pf-m-light">
<nav class="pf-c-nav pf-m-tertiary" aria-label="Local">
<button class="pf-c-nav__scroll-button" disabled aria-label="Scroll left">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
<ul class="pf-c-nav__list">
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">Nav item 1</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Nav item 2</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Nav item 3</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Nav item 4</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Nav item 5</a>
</li>
</ul>
<button class="pf-c-nav__scroll-button" disabled aria-label="Scroll right">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</nav>
</section>
<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1>Data list</h1>
<p>Below is an example of a data list.</p>
</div>
</section>
<section class="pf-c-page__main-section pf-m-no-padding pf-m-padding-on-md">
<div class="pf-c-card">
<ul class="pf-c-data-list" role="list" aria-label="Data list actionable demo" id="page-layout-data-list-actionable-data-list">
<li class="pf-c-data-list__item" aria-labelledby="page-layout-data-list-actionable-data-list-item1">
<div class="pf-c-data-list__item-row">
<div class="pf-c-data-list__item-control">
<div class="pf-c-data-list__check">
<input type="checkbox" type="checkbox" name="check-action-check1" aria-labelledby="page-layout-data-list-actionable-data-list-item1" />
</div>
</div>
<div class="pf-c-data-list__item-content">
<div class="pf-c-data-list__cell pf-m-align-left">
<div>
<div>
<p id='page-layout-data-list-actionable-data-list-item1'>patternfly</p>
<small>Working repo for PatternFly 4
<a>https://pf4.patternfly.org/</a>
</small>
</div>
<div class="pf-l-flex pf-m-wrap">
<div>
<i class="fas fa-code-branch" aria-hidden="true"></i>
10
</div>
<div>
<i class="fas fa-code" aria-hidden="true"></i>
4
</div>
<div>
<i class="fas fa-cube" aria-hidden="true"></i>
5
</div>
<div>Updated 2 days ago</div>
</div>
</div>
</div>
</div>
<div class="pf-c-data-list__item-action">
<button class="pf-c-button pf-m-secondary" type="button">Action</button>
<button class="pf-c-button pf-m-link" type="button">Action</button>
</div>
</div>
</li>
<li class="pf-c-data-list__item" aria-labelledby="page-layout-data-list-actionable-data-list-item2">
<div class="pf-c-data-list__item-row">
<div class="pf-c-data-list__item-control">
<div class="pf-c-data-list__check">
<input type="checkbox" type="checkbox" name="check-action-check2" aria-labelledby="page-layout-data-list-actionable-data-list-item2" />
</div>
</div>
<div class="pf-c-data-list__item-content">
<div class="pf-c-data-list__cell pf-m-align-left">
<div>
<div>
<p id='page-layout-data-list-actionable-data-list-item2'>patternfly-elements</p>
<small>PatternFly elements</small>
</div>
<div class="pf-l-flex pf-m-wrap">
<div>
<i class="fas fa-code-branch" aria-hidden="true"></i>
5
</div>
<div>
<i class="fas fa-code" aria-hidden="true"></i>
9
</div>
<div>
<i class="fas fa-cube" aria-hidden="true"></i>
2
</div>
<div>
<i class="fas fa-check-circle" aria-hidden="true"></i>
11
</div>
<div>
<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
4
</div>
<div>
<i class="fas fa-times-circle" aria-hidden="true"></i>
1
</div>
<div>Updated 2 days ago</div>
</div>
</div>
</div>
</div>
<div class="pf-c-data-list__item-action">
<button class="pf-c-button pf-m-secondary" type="button">Action</button>
<button class="pf-c-button pf-m-link" type="button">Action</button>
</div>
</div>
</li>
<li class="pf-c-data-list__item" aria-labelledby="page-layout-data-list-actionable-data-list-item3">
<div class="pf-c-data-list__item-row">
<div class="pf-c-data-list__item-control">
<div class="pf-c-data-list__check">
<input type="checkbox" type="checkbox" name="check-action-check3" aria-labelledby="page-layout-data-list-actionable-data-list-item3" />
</div>
</div>
<div class="pf-c-data-list__item-content">
<div class="pf-c-data-list__cell pf-m-align-left pf-m-flex-2">
<p id='page-layout-data-list-actionable-data-list-item3'>patternfly-unified-design-kit</p>
</div>
</div>
<div class="pf-c-data-list__item-action">
<button class="pf-c-button pf-m-secondary" type="button">Action</button>
<button class="pf-c-button pf-m-link" type="button">Action</button>
</div>
</div>
</li>
<li class="pf-c-data-list__item" aria-labelledby="page-layout-data-list-actionable-data-list-item4">
<div class="pf-c-data-list__item-row">
<div class="pf-c-data-list__item-control">
<div class="pf-c-data-list__check">
<input type="checkbox" type="checkbox" name="check-action-check4" aria-labelledby="page-layout-data-list-actionable-data-list-item4" />
</div>
</div>
<div class="pf-c-data-list__item-content">
<div class="pf-c-data-list__cell pf-m-align-left pf-m-flex-2">
<div>
<div>
<p id='page-layout-data-list-actionable-data-list-item4'>patternfly</p>
<small>Working repo for PatternFly 4
<a>https://pf4.patternfly.org/</a>
</small>
</div>
<div class="pf-l-flex pf-m-wrap">
<div>
<i class="fas fa-code-branch" aria-hidden="true"></i>
10
</div>
<div>
<i class="fas fa-code" aria-hidden="true"></i>
4
</div>
<div>
<i class="fas fa-cube" aria-hidden="true"></i>
5
</div>
<div>Updated 2 days ago</div>
</div>
</div>
</div>
</div>
<div class="pf-c-data-list__item-action">
<button class="pf-c-button pf-m-secondary" type="button">Action</button>
<button class="pf-c-button pf-m-link" type="button">Action</button>
</div>
</div>
</li>
</ul>
<div class="pf-c-pagination pf-m-bottom">
<div class="pf-c-options-menu">
<div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
<span class="pf-c-options-menu__toggle-text">
<b>1 - 10</b> of
<b>37</b>
</span>
<button class="pf-c-options-menu__toggle-button" id="{{page--id}}-pagination-options-menu-bottom-example-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Items per page">
<span class="pf-c-options-menu__toggle-button-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
</div>
<ul class="pf-c-options-menu__menu" aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle" hidden>
<li>
<button class="pf-c-options-menu__menu-item" type="button">5 per page</button>
</li>
<li>
<button class="pf-c-options-menu__menu-item" type="button">10 per page
<div class="pf-c-options-menu__menu-item-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</div>
</button>
</li>
<li>
<button class="pf-c-options-menu__menu-item" type="button">20 per page</button>
</li>
</ul>
</div>
<nav class="pf-c-pagination__nav" aria-label="Pagination">
<div class="pf-c-pagination__nav-control pf-m-first">
<button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to first page">
<i class="fas fa-angle-double-left" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-pagination__nav-control pf-m-prev">
<button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to previous page">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-pagination__nav-page-select">
<input class="pf-c-form-control" aria-label="Current page" type="number" min="1" max="4" value="1" />
<span aria-hidden="true">of 4</span>
</div>
<div class="pf-c-pagination__nav-control pf-m-next">
<button class="pf-c-button pf-m-plain" type="button" aria-label="Go to next page">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-pagination__nav-control pf-m-last">
<button class="pf-c-button pf-m-plain" type="button" aria-label="Go to last page">
<i class="fas fa-angle-double-right" aria-hidden="true"></i>
</button>
</div>
</nav>
</div>
</div>
</section>
</main>
</div>
```
### Expandable demo
```html isFullscreen
<div class="pf-c-page" id="page-layout-data-list-expandable">
<a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content-page-layout-data-list-expandable">Skip to content</a>
<header class="pf-c-page__header">
<div class="pf-c-page__header-brand">
<div class="pf-c-page__header-brand-toggle">
<button class="pf-c-button pf-m-plain" type="button" id="page-layout-data-list-expandable-nav-toggle" aria-label="Global navigation" aria-expanded="true" aria-controls="page-layout-data-list-expandable-primary-nav">
<i class="fas fa-bars" aria-hidden="true"></i>
</button>
</div>
<a href="#" class="pf-c-page__header-brand-link">
<img class="pf-c-brand" src="/assets/images/PF-Masthead-Logo.svg" alt="PatternFly logo" />
</a>
</div>
<div class="pf-c-page__header-tools">
<div class="pf-c-page__header-tools-group">
<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg">
<button class="pf-c-button pf-m-plain" type="button" aria-label="Settings">
<i class="fas fa-cog" aria-hidden="true"></i>
</button>
</div>
<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg">
<button class="pf-c-button pf-m-plain" type="button" aria-label="Help">
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-c-page__header-tools-group">
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
<div class="pf-c-dropdown">
<button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-data-list-expandable-dropdown-kebab-right-aligned-1-button" aria-expanded="false" aria-label="Actions">
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
<ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="page-layout-data-list-expandable-dropdown-kebab-right-aligned-1-button" hidden>
<li>
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
</li>
<li>
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
</li>
<li>
<a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a>
</li>
<li>
<button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button>
</li>
<li class="pf-c-divider" role="separator"></li>
<li>
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
</li>
</ul>
</div>
</div>
<div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md">
<div class="pf-c-dropdown">
<button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="page-layout-data-list-expandable-dropdown-button" aria-expanded="false">
<span class="pf-c-dropdown__toggle-text">John Smith</span>
<span class="pf-c-dropdown__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
<div class="pf-c-dropdown__menu" hidden>[Panel contents here]</div>
</div>
</div>
</div>
<img class="pf-c-avatar" src="/assets/images/img_avatar.svg" alt="Avatar image" />
</div>
</header>
<div class="pf-c-page__sidebar">
<div class="pf-c-page__sidebar-body">
<nav class="pf-c-nav" id="page-layout-data-list-expandable-primary-nav" aria-label="Global">
<ul class="pf-c-nav__list">
<li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
<button class="pf-c-nav__link" aria-expanded="true">Components
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section class="pf-c-nav__subnav" aria-labelledby="page-layout-data-list-expandable-subnav-title1">
<h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-data-list-expandable-subnav-title1">First nav item</h2>
<ul class="pf-c-nav__list">
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Forms</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Data table</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">Data list</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Icons</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Layouts</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">List</a>
</li>
</ul>
</section>
</li>
<li class="pf-c-nav__item pf-m-expandable">
<button class="pf-c-nav__link" aria-expanded="false">Patterns
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section class="pf-c-nav__subnav" aria-labelledby="page-layout-data-list-expandable-subnav-title2" hidden>
<h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-data-list-expandable-subnav-title2">Second nav item</h2>
<ul class="pf-c-nav__list"></ul>
</section>
</li>
<li class="pf-c-nav__item pf-m-expandable">
<button class="pf-c-nav__link" aria-expanded="false">Typography
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section class="pf-c-nav__subnav" aria-labelledby="page-layout-data-list-expandable-subnav-title3" hidden>
<h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-data-list-expandable-subnav-title3">Third nav item</h2>
<ul class="pf-c-nav__list"></ul>
</section>
</li>
<li class="pf-c-nav__item pf-m-expandable">
<button class="pf-c-nav__link" aria-expanded="false">Icons
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section class="pf-c-nav__subnav" aria-labelledby="page-layout-data-list-expandable-subnav-title4" hidden>
<h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-data-list-expandable-subnav-title4">Second nav item</h2>
<ul class="pf-c-nav__list"></ul>
</section>
</li>
<li class="pf-c-nav__item pf-m-expandable">
<button class="pf-c-nav__link" aria-expanded="false">Colors
<span class="pf-c-nav__toggle">
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</button>
<section class="pf-c-nav__subnav" aria-labelledby="page-layout-data-list-expandable-subnav-title5" hidden>
<h2 class="pf-c-nav__subnav-title pf-screen-reader" id="page-layout-data-list-expandable-subnav-title5">Second nav item</h2>
<ul class="pf-c-nav__list"></ul>
</section>
</li>
</ul>
</nav>
</div>
</div>
<main class="pf-c-page__main" tabindex="-1" id="main-content-page-layout-data-list-expandable">
<section class="pf-c-page__main-nav pf-m-light">
<nav class="pf-c-nav pf-m-tertiary" aria-label="Local">
<button class="pf-c-nav__scroll-button" disabled aria-label="Scroll left">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
<ul class="pf-c-nav__list">
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">Nav item 1</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Nav item 2</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Nav item 3</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Nav item 4</a>
</li>
<li class="pf-c-nav__item">
<a href="#" class="pf-c-nav__link">Nav item 5</a>
</li>
</ul>
<button class="pf-c-nav__scroll-button" disabled aria-label="Scroll right">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</nav>
</section>
<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1>Data list</h1>
<p>Below is an example of a data list.</p>
</div>
</section>
<section class="pf-c-page__main-section pf-m-no-padding pf-m-pa