@patternfly/patternfly

--- id: Data list section: components wrapperTag: div ---## Demos ### Basic ```html isFullscreen <div class="pf-v5-c-page" id="data-list-basic-example"> <div class="pf-v5-c-skip-to-content"> <a class="pf-v5-c-button pf-m-primary" href="#main-content-data-list-basic-example" >Skip to content</a> </div> <header class="pf-v5-c-masthead" id="data-list-basic-example-masthead"> <span class="pf-v5-c-masthead__toggle"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Global navigation" > <i class="fas fa-bars" aria-hidden="true"></i> </button> </span> <div class="pf-v5-c-masthead__main"> <a class="pf-v5-c-masthead__brand" href="#"> <img class="pf-v5-c-brand" src="/assets/images/pf-logo.svg" alt="PatternFly logo" style="--pf-v5-c-brand--Height:36px" /> </a> </div> <div class="pf-v5-c-masthead__content"> <div class="pf-v5-c-toolbar pf-m-full-height pf-m-static" id="data-list-basic-example-masthead-toolbar" > <div class="pf-v5-c-toolbar__content"> <div class="pf-v5-c-toolbar__content-section"> <div class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md" > <div class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg" > <div class="pf-v5-c-toolbar__item"> <button class="pf-v5-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Application launcher" > <i class="fas fa-th" aria-hidden="true"></i> </button> </div> <div class="pf-v5-c-toolbar__item"> <button class="pf-v5-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Settings" > <i class="fas fa-cog" aria-hidden="true"></i> </button> </div> <div class="pf-v5-c-toolbar__item"> <button class="pf-v5-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Help" > <i class="fas fa-question-circle" aria-hidden="true"></i> </button> </div> </div> <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg"> <button class="pf-v5-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> </div> </div> <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm"> <button class="pf-v5-c-menu-toggle pf-m-full-height" type="button" aria-expanded="false" > <span class="pf-v5-c-menu-toggle__icon"> <img class="pf-v5-c-avatar" alt="Avatar image" src="/assets/images/img_avatar-light.svg" /> </span> <span class="pf-v5-c-menu-toggle__text">Ned Username</span> <span class="pf-v5-c-menu-toggle__controls"> <span class="pf-v5-c-menu-toggle__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </span> </button> </div> </div> </div> </div> </div> </header> <div class="pf-v5-c-page__sidebar"> <div class="pf-v5-c-page__sidebar-body"> <nav class="pf-v5-c-nav" id="data-list-basic-example-primary-nav" aria-label="Global" > <ul class="pf-v5-c-nav__list" role="list"> <li class="pf-v5-c-nav__item"> <a href="#" class="pf-v5-c-nav__link">System panel</a> </li> <li class="pf-v5-c-nav__item"> <a href="#" class="pf-v5-c-nav__link pf-m-current" aria-current="page" >Policy</a> </li> <li class="pf-v5-c-nav__item"> <a href="#" class="pf-v5-c-nav__link">Authentication</a> </li> <li class="pf-v5-c-nav__item"> <a href="#" class="pf-v5-c-nav__link">Network services</a> </li> <li class="pf-v5-c-nav__item"> <a href="#" class="pf-v5-c-nav__link">Server</a> </li> </ul> </nav> </div> </div> <main class="pf-v5-c-page__main" tabindex="-1" id="main-content-data-list-basic-example" > <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width"> <div class="pf-v5-c-page__main-body"> <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb"> <ol class="pf-v5-c-breadcrumb__list" role="list"> <li class="pf-v5-c-breadcrumb__item"> <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a> </li> <li class="pf-v5-c-breadcrumb__item"> <span class="pf-v5-c-breadcrumb__item-divider"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a> </li> <li class="pf-v5-c-breadcrumb__item"> <span class="pf-v5-c-breadcrumb__item-divider"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a> </li> <li class="pf-v5-c-breadcrumb__item"> <span class="pf-v5-c-breadcrumb__item-divider"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> <a href="#" class="pf-v5-c-breadcrumb__link pf-m-current" aria-current="page" >Section landing</a> </li> </ol> </nav> </div> </section> <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light"> <div class="pf-v5-c-page__main-body"> <div class="pf-v5-c-content"> <h1>Main title</h1> <p>This is a full page demo.</p> </div> </div> </section> <section class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl" > <div class="pf-v5-c-card"> <div class="pf-v5-c-toolbar" id="data-list-basic-example-toolbar"> <div class="pf-v5-c-toolbar__content"> <div class="pf-v5-c-toolbar__content-section pf-m-nowrap"> <div class="pf-v5-c-toolbar__item pf-m-bulk-select"> <div class="pf-v5-c-menu-toggle pf-m-split-button" id="data-list-basic-example-toolbar-check" > <label class="pf-v5-c-check pf-m-standalone" id="data-list-basic-example-toolbar-check-check" for="data-list-basic-example-toolbar-check-check-input" > <input class="pf-v5-c-check__input" type="checkbox" id="data-list-basic-example-toolbar-check-check-input" name="data-list-basic-example-toolbar-check-check-input" aria-label="Standalone check" /> </label> <button class="pf-v5-c-menu-toggle__button" type="button" aria-expanded="false" id="data-list-basic-example-toolbar-menu-toggle-toggle-button" aria-label="Menu toggle" > <span class="pf-v5-c-menu-toggle__controls"> <span class="pf-v5-c-menu-toggle__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </span> </button> </div> </div> <div class="pf-v5-c-toolbar__item"> <div class="pf-v5-c-context-selector"> <span id="data-list-basic-example-toolbar-context-selector-label" hidden >Selected project:</span> <button class="pf-v5-c-context-selector__toggle" aria-expanded="false" id="data-list-basic-example-toolbar-context-selector-toggle" aria-labelledby="data-list-basic-example-toolbar-context-selector-label data-list-basic-example-toolbar-context-selector-toggle" > <span class="pf-v5-c-context-selector__toggle-text" >My project</span> <span class="pf-v5-c-context-selector__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <div class="pf-v5-c-context-selector__menu" hidden> <div class="pf-v5-c-context-selector__menu-search"> <div class="pf-v5-c-text-input-group"> <div class="pf-v5-c-text-input-group__main pf-m-icon"> <span class="pf-v5-c-text-input-group__text"> <span class="pf-v5-c-text-input-group__icon"> <i class="fas fa-fw fa-search"></i> </span> <input class="pf-v5-c-text-input-group__text-input" type="text" placeholder="Search" value aria-label="Search input" /> </span> </div> </div> </div> <ul class="pf-v5-c-context-selector__menu-list" role="menu"> <li>My project</li> <li>OpenShift cluster</li> <li>Production Ansible</li> <li>AWS</li> <li>Azure</li> <li>My project</li> <li>OpenShift cluster</li> <li>Production Ansible</li> <li>AWS</li> <li>Azure</li> </ul> </div> </div> </div> <div class="pf-v5-c-overflow-menu" id="data-list-basic-example-toolbar-overflow-menu" > <div class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg" > <div class="pf-v5-c-overflow-menu__group pf-m-button-group"> <div class="pf-v5-c-overflow-menu__item"> <button class="pf-v5-c-button pf-m-primary" type="button" >Create instance</button> </div> </div> </div> <div class="pf-v5-c-overflow-menu__control"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain" type="button" id="data-list-basic-example-toolbar-overflow-menu-dropdown-toggle" aria-label="Dropdown with additional options" aria-expanded="false" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu" role="menu" aria-labelledby="data-list-basic-example-toolbar-overflow-menu-dropdown-toggle" hidden > <li role="none"> <button role="menuitem" class="pf-v5-c-dropdown__menu-item" >Action 7</button> </li> </ul> </div> </div> </div> <div class="pf-v5-c-toolbar__item pf-m-pagination"> <div class="pf-v5-c-pagination pf-m-compact"> <button class="pf-v5-c-menu-toggle pf-m-plain pf-m-text" type="button" aria-expanded="false" id="data-list-basic-example-toolbar-top-pagination" > <span class="pf-v5-c-menu-toggle__text"> <b>1 - 10</b> of  <b>36</b> </span> <span class="pf-v5-c-menu-toggle__controls"> <span class="pf-v5-c-menu-toggle__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </span> </button> <nav class="pf-v5-c-pagination__nav" aria-label="Toolbar top pagination" > <div class="pf-v5-c-pagination__nav-control pf-m-prev"> <button class="pf-v5-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-v5-c-pagination__nav-control pf-m-next"> <button class="pf-v5-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> </nav> </div> </div> </div> <div class="pf-v5-c-toolbar__expandable-content pf-m-hidden" id="data-list-basic-example-toolbar-expandable-content" hidden ></div> </div> </div> <ul class="pf-v5-c-data-list" role="list" aria-label="Simple data list example" id="data-list-basic-example-data-list" > <li class="pf-v5-c-data-list__item" aria-labelledby="data-list-basic-example-data-list-item-1" > <div class="pf-v5-c-data-list__item-row"> <div class="pf-v5-c-data-list__item-content"> <div class="pf-v5-c-data-list__cell pf-m-align-left"> <div class="pf-v5-l-flex pf-m-column pf-m-space-items-md"> <div class="pf-v5-l-flex pf-m-column pf-m-space-items-none"> <div class="pf-v5-l-flex__item"> <p id="data-list-basic-example-data-list-item-1" >patternfly</p> </div> <div class="pf-v5-l-flex__item"> <small> Working repo for PatternFly 4 <a href>https://pf4.patternfly.org/</a> </small> </div> </div> <div class="pf-v5-l-flex pf-m-wrap"> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-code-branch" aria-hidden="true"></i> </div> <div class="pf-v5-l-flex__item"> <span>10</span> </div> </div> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-code" aria-hidden="true"></i> </div> <div class="pf-v5-l-flex__item"> <span>4</span> </div> </div> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-cube" aria-hidden="true"></i> </div> <div class="pf-v5-l-flex__item"> <span>5</span> </div> </div> <div class="pf-v5-l-flex__item">Updated 2 days ago</div> </div> </div> </div> <div class="pf-v5-c-data-list__cell pf-m-align-right pf-m-no-fill" > <button class="pf-v5-c-button pf-m-secondary" type="button" >Action</button> <button class="pf-v5-c-button pf-m-link" type="button">Link</button> </div> </div> </div> </li> <li class="pf-v5-c-data-list__item" aria-labelledby="data-list-basic-example-data-list-item-2" > <div class="pf-v5-c-data-list__item-row"> <div class="pf-v5-c-data-list__item-content"> <div class="pf-v5-c-data-list__cell pf-m-align-left"> <div class="pf-v5-l-flex pf-m-column pf-m-space-items-md"> <div class="pf-v5-l-flex pf-m-column pf-m-space-items-none"> <div class="pf-v5-l-flex__item"> <p id="data-list-basic-example-data-list-item-2" >patternfly-elements</p> </div> <div class="pf-v5-l-flex__item"> <small>PatternFly elements</small> </div> </div> <div class="pf-v5-l-flex pf-m-wrap"> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-code-branch" aria-hidden="true"></i> </div> <div class="pf-v5-l-flex__item"> <span>5</span> </div> </div> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-code" aria-hidden="true"></i> </div> <div class="pf-v5-l-flex__item"> <span>9</span> </div> </div> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-cube" aria-hidden="true"></i> </div> <div class="pf-v5-l-flex__item"> <span>2</span> </div> </div> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-check-circle" aria-hidden="true"></i> </div> <div class="pf-v5-l-flex__item"> <span>11</span> </div> </div> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-exclamation-triangle" aria-hidden="true" ></i> </div> <div class="pf-v5-l-flex__item"> <span>4</span> </div> </div> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-times-circle" aria-hidden="true"></i> </div> <div class="pf-v5-l-flex__item"> <span>1</span> </div> </div> <div class="pf-v5-l-flex__item">Updated 2 days ago</div> </div> </div> </div> <div class="pf-v5-c-data-list__cell pf-m-align-right pf-m-no-fill" > <button class="pf-v5-c-button pf-m-secondary" type="button" >Action</button> <button class="pf-v5-c-button pf-m-link" type="button">Link</button> </div> </div> </div> </li> <li class="pf-v5-c-data-list__item" aria-labelledby="data-list-basic-example-data-list-item-3" > <div class="pf-v5-c-data-list__item-row"> <div class="pf-v5-c-data-list__item-content"> <div class="pf-v5-c-data-list__cell pf-m-align-left"> <p id="data-list-basic-example-data-list-item-3" >patternfly-unified-design-kit</p> </div> <div class="pf-v5-c-data-list__cell pf-m-align-right pf-m-no-fill" > <button class="pf-v5-c-button pf-m-secondary" type="button" >Action</button> <button class="pf-v5-c-button pf-m-link" type="button">Link</button> </div> </div> </div> </li> <li class="pf-v5-c-data-list__item" aria-labelledby="data-list-basic-example-data-list-item-4" > <div class="pf-v5-c-data-list__item-row"> <div class="pf-v5-c-data-list__item-content"> <div class="pf-v5-c-data-list__cell pf-m-align-left"> <div class="pf-v5-l-flex pf-m-column pf-m-space-items-md"> <div class="pf-v5-l-flex pf-m-column pf-m-space-items-none"> <div class="pf-v5-l-flex__item"> <p id="data-list-basic-example-data-list-item-4" >patternfly</p> </div> <div class="pf-v5-l-flex__item"> <small> Working repo for PatternFly 4 <a href>https://pf4.patternfly.org/</a> </small> </div> </div> <div class="pf-v5-l-flex pf-m-wrap"> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-code-branch" aria-hidden="true"></i> </div> <div class="pf-v5-l-flex__item"> <span>10</span> </div> </div> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-code" aria-hidden="true"></i> </div> <div class="pf-v5-l-flex__item"> <span>4</span> </div> </div> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-cube" aria-hidden="true"></i> </div> <div class="pf-v5-l-flex__item"> <span>5</span> </div> </div> <div class="pf-v5-l-flex__item">Updated 2 days ago</div> </div> </div> </div> <div class="pf-v5-c-data-list__cell pf-m-align-right pf-m-no-fill" > <button class="pf-v5-c-button pf-m-secondary" type="button" >Action</button> <button class="pf-v5-c-button pf-m-link" type="button">Link</button> </div> </div> </div> </li> <li class="pf-v5-c-data-list__item" aria-labelledby="data-list-basic-example-data-list-item-5" > <div class="pf-v5-c-data-list__item-row"> <div class="pf-v5-c-data-list__item-content"> <div class="pf-v5-c-data-list__cell pf-m-align-left"> <div class="pf-v5-l-flex pf-m-column pf-m-space-items-md"> <div class="pf-v5-l-flex pf-m-column pf-m-space-items-none"> <div class="pf-v5-l-flex__item"> <p id="data-list-basic-example-data-list-item-5" >patternfly-elements</p> </div> <div class="pf-v5-l-flex__item"> <small>PatternFly elements</small> </div> </div> <div class="pf-v5-l-flex pf-m-wrap"> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-code-branch" aria-hidden="true"></i> </div> <div class="pf-v5-l-flex__item"> <span>5</span> </div> </div> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-code" aria-hidden="true"></i> </div> <div class="pf-v5-l-flex__item"> <span>9</span> </div> </div> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-cube" aria-hidden="true"></i> </div> <div class="pf-v5-l-flex__item"> <span>2</span> </div> </div> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-check-circle" aria-hidden="true"></i> </div> <div class="pf-v5-l-flex__item"> <span>11</span> </div> </div> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-exclamation-triangle" aria-hidden="true" ></i> </div> <div class="pf-v5-l-flex__item"> <span>4</span> </div> </div> <div class="pf-v5-l-flex pf-m-space-items-xs"> <div class="pf-v5-l-flex__item"> <i class="fas fa-times-circle" aria-hidden="true"></i> </div> <div class="pf-v5-l-flex__item"> <span>1</span> </div> </div> <div class="pf-v5-l-flex__item">Updated 2 days ago</div> </div> </div> </div> <div class="pf-v5-c-data-list__cell pf-m-align-right pf-m-no-fill" > <button class="pf-v5-c-button pf-m-secondary" type="button" >Action</button> <button class="pf-v5-c-button pf-m-link" type="button">Link</button> </div> </div> </div> </li> </ul> <div class="pf-v5-c-pagination pf-m-bottom"> <button class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-top" type="button" aria-expanded="false" id="{{page--id}}-pagination-menu-toggle-bottom-example" > <span class="pf-v5-c-menu-toggle__text"> <b>1 - 10</b> of  <b>36</b> </span> <span class="pf-v5-c-menu-toggle__controls"> <span class="pf-v5-c-menu-toggle__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </span> </button> <nav class="pf-v5-c-pagination__nav" aria-label="Pagination"> <div class="pf-v5-c-pagination__nav-control pf-m-first"> <button class="pf-v5-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-v5-c-pagination__nav-control pf-m-prev"> <button class="pf-v5-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-v5-c-pagination__nav-page-select"> <span class="pf-v5-c-form-control"> <input aria-label="Current page" type="number" min="1" max="4" value="1" /> </span> <span aria-hidden="true">of 4</span> </div> <div class="pf-v5-c-pagination__nav-control pf-m-next"> <button class="pf-v5-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-v5-c-pagination__nav-control pf-m-last"> <button class="pf-v5-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-v5-c-page" id="data-list-actionable-example"> <div class="pf-v5-c-skip-to-content"> <a class="pf-v5-c-button pf-m-primary" href="#main-content-data-list-actionable-example" >Skip to content</a> </div> <header class="pf-v5-c-masthead" id="data-list-actionable-example-masthead"> <span class="pf-v5-c-masthead__toggle"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Global navigation" > <i class="fas fa-bars" aria-hidden="true"></i> </button> </span> <div class="pf-v5-c-masthead__main"> <a class="pf-v5-c-masthead__brand" href="#"> <img class="pf-v5-c-brand" src="/assets/images/pf-logo.svg" alt="PatternFly logo" style="--pf-v5-c-brand--Height:36px" /> </a> </div> <div class="pf-v5-c-masthead__content"> <div class="pf-v5-c-toolbar pf-m-full-height pf-m-static" id="data-list-actionable-example-masthead-toolbar" > <div class="pf-v5-c-toolbar__content"> <div class="pf-v5-c-toolbar__content-section"> <div class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md" > <div class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg" > <div class="pf-v5-c-toolbar__item"> <button class="pf-v5-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Application launcher" > <i class="fas fa-th" aria-hidden="true"></i> </button> </div> <div class="pf-v5-c-toolbar__item"> <button class="pf-v5-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Settings" > <i class="fas fa-cog" aria-hidden="true"></i> </button> </div> <div class="pf-v5-c-toolbar__item"> <button class="pf-v5-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Help" > <i class="fas fa-question-circle" aria-hidden="true"></i> </button> </div> </div> <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg"> <button class="pf-v5-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> </div> </div> <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm"> <button class="pf-v5-c-menu-toggle pf-m-full-height" type="button" aria-expanded="false" > <span class="pf-v5-c-menu-toggle__icon"> <img class="pf-v5-c-avatar" alt="Avatar image" src="/assets/images/img_avatar-light.svg" /> </span> <span class="pf-v5-c-menu-toggle__text">Ned Username</span> <span class="pf-v5-c-menu-toggle__controls"> <span class="pf-v5-c-menu-toggle__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </span> </button> </div> </div> </div> </div> </div> </header> <div class="pf-v5-c-page__sidebar"> <div class="pf-v5-c-page__sidebar-body"> <nav class="pf-v5-c-nav" id="data-list-actionable-example-primary-nav" aria-label="Global" > <ul class="pf-v5-c-nav__list" role="list"> <li class="pf-v5-c-nav__item"> <a href="#" class="pf-v5-c-nav__link">System panel</a> </li> <li class="pf-v5-c-nav__item"> <a href="#" class="pf-v5-c-nav__link pf-m-current" aria-current="page" >Policy</a> </li> <li class="pf-v5-c-nav__item"> <a href="#" class="pf-v5-c-nav__link">Authentication</a> </li> <li class="pf-v5-c-nav__item"> <a href="#" class="pf-v5-c-nav__link">Network services</a> </li> <li class="pf-v5-c-nav__item"> <a href="#" class="pf-v5-c-nav__link">Server</a> </li> </ul> </nav> </div> </div> <main class="pf-v5-c-page__main" tabindex="-1" id="main-content-data-list-actionable-example" > <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width"> <div class="pf-v5-c-page__main-body"> <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb"> <ol class="pf-v5-c-breadcrumb__list" role="list"> <li class="pf-v5-c-breadcrumb__item"> <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a> </li> <li class="pf-v5-c-breadcrumb__item"> <span class="pf-v5-c-breadcrumb__item-divider"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a> </li> <li class="pf-v5-c-breadcrumb__item"> <span class="pf-v5-c-breadcrumb__item-divider"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a> </li> <li class="pf-v5-c-breadcrumb__item"> <span class="pf-v5-c-breadcrumb__item-divider"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> <a href="#" class="pf-v5-c-breadcrumb__link pf-m-current" aria-current="page" >Section landing</a> </li> </ol> </nav> </div> </section> <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light"> <div class="pf-v5-c-page__main-body"> <div class="pf-v5-c-content"> <h1>Main title</h1> <p>This is a full page demo.</p> </div> </div> </section> <section class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-xl" > <div class="pf-v5-c-card"> <div class="pf-v5-c-toolbar" id="data-list-actionable-example-toolbar"> <div class="pf-v5-c-toolbar__content"> <div class="pf-v5-c-toolbar__content-section pf-m-nowrap"> <div class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl" > <div class="pf-v5-c-toolbar__toggle"> <button class="pf-v5-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Show filters" aria-controls="data-list-actionable-example-toolbar-expandable-content" > <i class="fas fa-filter" aria-hidden="true"></i> </button> </div> <div class="pf-v5-c-toolbar__item pf-m-bulk-select"> <div class="pf-v5-c-menu-toggle pf-m-split-button" id="data-list-actionable-example-toolbar-check" > <label class="pf-v5-c-check pf-m-standalone" id="data-list-actionable-example-toolbar-check-check" for="data-list-actionable-example-toolbar-check-check-input" > <input class="pf-v5-c-check__input" type="checkbox" id="data-list-actionable-example-toolbar-check-check-input" name="data-list-actionable-example-toolbar-check-check-input" aria-label="Standalone check" /> </label> <button class="pf-v5-c-menu-toggle__button" type="button" aria-expanded="false" id="data-list-actionable-example-toolbar-menu-toggle-toggle-button" aria-label="Menu toggle" > <span class="pf-v5-c-menu-toggle__controls"> <span class="pf-v5-c-menu-toggle__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </span> </button> </div> </div> <div class="pf-v5-c-toolbar__item"> <div class="pf-v5-c-context-selector"> <span id="data-list-actionable-example-toolbar-context-selector-label" hidden >Selected project:</span> <button class="pf-v5-c-context-selector__toggle" aria-expanded="false" id="data-list-actionable-example-toolbar-context-selector-toggle" aria-labelledby="data-list-actionable-example-toolbar-context-selector-label data-list-actionable-example-toolbar-context-selector-toggle" > <span class="pf-v5-c-context-selector__toggle-text" >My project</span> <span class="pf-v5-c-context-selector__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <div class="pf-v5-c-context-selector__menu" hidden> <div class="pf-v5-c-context-selector__menu-search"> <div class="pf-v5-c-text-input-group"> <div class="pf-v5-c-text-input-group__main pf-m-icon"> <span class="pf-v5-c-text-input-group__text"> <span class="pf-v5-c-text-input-group__icon"> <i class="fas fa-fw fa-search"></i> </span> <input class="pf-v5-c-text-input-group__text-input" type="text" placeholder="Search" value aria-label="Search input" /> </span> </div> </div> </div> <ul class="pf-v5-c-context-selector__menu-list" role="menu" > <li>My project</li> <li>OpenShift cluster</li> <li>Production Ansible</li> <li>AWS</li> <li>Azure</li> <li>My project</li> <li>OpenShift cluster</li> <li>Production Ansible</li> <li>AWS</li> <li>Azure</li> </ul> </div> </div> </div> </div> <div class="pf-v5-c-overflow-menu" id="data-list-actionable-example-toolbar-overflow-menu" > <div class="pf-v5-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg" > <div class="pf-v5-c-overflow-menu__group pf-m-button-group"> <div class="pf-v5-c-overflow-menu__item"> <button class="pf-v5-c-button pf-m-primary" type="button" >Create instance</button> </div> <div class="pf-v5-c-overflow-menu__item"> <button class="pf-v5-c-button pf-m-secondary" type="button" >Action</button> </div> </div> </div> <div class="pf-v5-c-overflow-menu__control"> <div class="pf-v5-c-dropdown"> <button class="pf-v5-c-button pf-v5-c-dropdown__toggle pf-m-plain" type="button" id="data-list-actionable-example-toolbar-overflow-menu-dropdown-toggle" aria-label="Dropdown with additional options" aria-expanded="false" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-v5-c-dropdown__menu" role="menu" aria-labelledby="data-list-actionable-example-toolbar-overflow-menu-dropdown-toggle" hidden > <li role="none"> <button role="menuitem" class="pf-v5-c-dropdown__menu-item" >Action 7</button> </li> </ul> </div> </div> </div> <div class="pf-v5-c-toolbar__item pf-m-pagination"> <div class="pf-v5-c-pagination pf-m-compact"> <button class="pf-v5-c-menu-toggle pf-m-plain pf-m-text" type="button" aria-expanded="false" id="data-list-actionable-example-toolbar-top-pagination" > <span class="pf-v5-c-menu-toggle__text"> <b>1 - 10</b> of  <b>36</b> </span> <span class="pf-v5-c-menu-toggle__controls"> <span class="pf-v5-c-menu-toggle__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </span> </button> <nav class="pf-v5-c-pagination__nav" aria-label="Toolbar top pagination" > <div class="pf-v5-c-pagination__nav-control pf-m-prev"> <button class="pf-v5-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-v5-c-pagination__nav-control pf-m-next"> <button class="pf-v5-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> </nav> </div> </div> </div> <div class="pf-v5-c-toolbar__expandable-content pf-m-hidden" id="data-list-actionable-example-toolbar-expandable-content" hidden ></div> </div> </div> <ul class="pf-v5-c-data-list" role="list" aria-label="Data list actionable demo" id="data-list-actionable-example-data-list" > <li class="pf-v5-c-data-list__item" aria-labelledby="data-list-actionable-example-data-list-item-1" > <div class="pf-v5-c-data-list__item-row"> <div class="pf-v5-c-data-list__item-control"> <div class="pf-v5-c-data-list__check"> <div class="pf-v5-c-check pf-m-standalone"> <input