@patternfly/patternfly 4.176.3 → 4.179.0

package/docs/demos/Toolbar/examples/Toolbar.md

@@ -1769,49 +1769,1031 @@ section: components
 
 ### Toolbar pagination management on mobile
 
-```hbs isFullscreen
-{{#> page-demo-default page-demo-default--id="toolbar-pagination-management"}}
-  {{#> page-main-section}}
-    {{#> toolbar toolbar--id=(concat page-demo-default--id '-mobile-example') toolbar--modifier="pf-m-nowrap"}}
-      {{#> toolbar-content}}
-        {{#> toolbar-content-section toolbar-content-section--modifier="pf-m-nowrap"}}
-          {{#> toolbar-group toolbar-group--modifier="pf-m-toggle-group pf-m-show"}}
-            {{> toolbar-toggle toolbar-toggle--IsExpanded="false"}}
-            {{#> toolbar-group toolbar-group--modifier="pf-m-filter-group"}}
-              {{#> toolbar-item toolbar-item--modifier="pf-m-search-filter"}}
-                {{#> input-group}}
-                  {{#> select select--attribute="style='width: 150px'" id=(concat toolbar--id '-select-name') select-toggle--icon="fas fa-filter"}}
-                    Name
-                  {{/select}}
-                  {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'id="' toolbar--id '-textInput11" name="textInput11" type="search" placeholder="Filter by name..." aria-label="Search input example"')}}
-                  {{/form-control}}
-                  {{#> button button--modifier="pf-m-control" button--attribute='aria-label="Search button for search input"'}}
-                    <i class="fas fa-search" aria-hidden="true"></i>
-                  {{/button}}
-                {{/input-group}}
-              {{/toolbar-item}}
-            {{/toolbar-group}}
-          {{/toolbar-group}}
-          {{> toolbar-overflow-menu-example toolbar-overflow-menu-example--control="true"}}
-          {{#> toolbar-item toolbar-item--modifier=(concat 'pf-m-pagination ' toolbar-item-pagination--modifier)}}
-            {{#> pagination pagination--modifier="pf-m-compact pf-m-hidden pf-m-visible-on-md"}}
-              {{#> pagination pagination--IsCompact="true"}}
-                {{> pagination-options-menu id="pagination-options-menu-bottom-example" options-menu--IsText="true"}}
-                {{> pagination-nav-content}}
-              {{/pagination}}
-            {{/pagination}}
-          {{/toolbar-item}}
-        {{/toolbar-content-section}}
-        {{> toolbar-expandable-content}}
-      {{/toolbar-content}}
-    {{/toolbar}}
-    <div>
-      {{> table-simple-table page--id="toolbar-and-table-static-search-overflow-menu-collapsed"}}
-      {{#> pagination pagination--modifier="pf-m-bottom"}}
-        {{> pagination-options-menu id="pagination-options-menu-bottom-collapsed-example" options-menu--IsText="true" pagination-options-menu--modifier="pf-m-top"}}
-        {{> pagination-nav-content}}
-      {{/pagination}}
+```html isFullscreen
+<div class="pf-c-page" id="toolbar-pagination-management">
+  <a
+    class="pf-c-skip-to-content pf-c-button pf-m-primary"
+    href="#main-content-toolbar-pagination-management"
+  >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="toolbar-pagination-management-nav-toggle"
+          aria-label="Global navigation"
+          aria-expanded="true"
+          aria-controls="toolbar-pagination-management-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>
-  {{/page-main-section}}
-{{/page-demo-default}}
+    <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="fas fa-question-circle" 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"
+              id="toolbar-pagination-management-dropdown-kebab-1-button"
+              aria-expanded="false"
+              type="button"
+              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="toolbar-pagination-management-dropdown-kebab-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"
+              id="toolbar-pagination-management-dropdown-kebab-2-button"
+              aria-expanded="false"
+              type="button"
+            >
+              <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>
+            <ul
+              class="pf-c-dropdown__menu"
+              aria-labelledby="toolbar-pagination-management-dropdown-kebab-2-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>
+      <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="toolbar-pagination-management-primary-nav"
+        aria-label="Global"
+      >
+        <ul class="pf-c-nav__list">
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">System panel</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a
+              href="#"
+              class="pf-c-nav__link pf-m-current"
+              aria-current="page"
+            >Policy</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Authentication</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Network services</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Server</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+  <main
+    class="pf-c-page__main"
+    tabindex="-1"
+    id="main-content-toolbar-pagination-management"
+  >
+    <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
+      <div class="pf-c-page__main-body">
+        <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
+          <ol class="pf-c-breadcrumb__list">
+            <li class="pf-c-breadcrumb__item">
+              <a href="#" class="pf-c-breadcrumb__link">Section home</a>
+            </li>
+            <li class="pf-c-breadcrumb__item">
+              <span class="pf-c-breadcrumb__item-divider">
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </span>
+
+              <a href="#" class="pf-c-breadcrumb__link">Section title</a>
+            </li>
+            <li class="pf-c-breadcrumb__item">
+              <span class="pf-c-breadcrumb__item-divider">
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </span>
+
+              <a href="#" class="pf-c-breadcrumb__link">Section title</a>
+            </li>
+            <li class="pf-c-breadcrumb__item">
+              <span class="pf-c-breadcrumb__item-divider">
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </span>
+
+              <a
+                href="#"
+                class="pf-c-breadcrumb__link pf-m-current"
+                aria-current="page"
+              >Section landing</a>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </section>
+    <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
+      <div class="pf-c-page__main-body">
+        <div class="pf-c-content">
+          <h1>Main title</h1>
+          <p>This is a full page demo.</p>
+        </div>
+      </div>
+    </section>
+    <section class="pf-c-page__main-section">
+      <div
+        class="pf-c-toolbar pf-m-nowrap"
+        id="toolbar-pagination-management-mobile-example"
+      >
+        <div class="pf-c-toolbar__content">
+          <div class="pf-c-toolbar__content-section pf-m-nowrap">
+            <div class="pf-c-toolbar__group pf-m-toggle-group pf-m-show">
+              <div class="pf-c-toolbar__toggle">
+                <button
+                  class="pf-c-button pf-m-plain"
+                  type="button"
+                  aria-label="Show filters"
+                  aria-expanded="false"
+                  aria-controls="toolbar-pagination-management-mobile-example-expandable-content"
+                >
+                  <i class="fas fa-filter" aria-hidden="true"></i>
+                </button>
+              </div>
+              <div class="pf-c-toolbar__group pf-m-filter-group">
+                <div class="pf-c-toolbar__item pf-m-search-filter">
+                  <div class="pf-c-input-group">
+                    <div class="pf-c-select" style="width: 150px">
+                      <span
+                        id="toolbar-pagination-management-mobile-example-select-name-label"
+                        hidden
+                      >Choose one</span>
+
+                      <button
+                        class="pf-c-select__toggle"
+                        type="button"
+                        id="toolbar-pagination-management-mobile-example-select-name-toggle"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        aria-labelledby="toolbar-pagination-management-mobile-example-select-name-label toolbar-pagination-management-mobile-example-select-name-toggle"
+                      >
+                        <div class="pf-c-select__toggle-wrapper">
+                          <span class="pf-c-select__toggle-icon">
+                            <i class="fas fa-filter" aria-hidden="true"></i>
+                          </span>
+                          <span class="pf-c-select__toggle-text">Name</span>
+                        </div>
+                        <span class="pf-c-select__toggle-arrow">
+                          <i class="fas fa-caret-down" aria-hidden="true"></i>
+                        </span>
+                      </button>
+
+                      <ul
+                        class="pf-c-select__menu"
+                        role="listbox"
+                        aria-labelledby="toolbar-pagination-management-mobile-example-select-name-label"
+                        hidden
+                        style="width: 150px"
+                      >
+                        <li role="presentation">
+                          <button
+                            class="pf-c-select__menu-item"
+                            role="option"
+                          >Running</button>
+                        </li>
+                        <li role="presentation">
+                          <button
+                            class="pf-c-select__menu-item pf-m-selected"
+                            role="option"
+                            aria-selected="true"
+                          >
+                            Stopped
+                            <span class="pf-c-select__menu-item-icon">
+                              <i class="fas fa-check" aria-hidden="true"></i>
+                            </span>
+                          </button>
+                        </li>
+                        <li role="presentation">
+                          <button
+                            class="pf-c-select__menu-item"
+                            role="option"
+                          >Down</button>
+                        </li>
+                        <li role="presentation">
+                          <button
+                            class="pf-c-select__menu-item"
+                            role="option"
+                          >Degraded</button>
+                        </li>
+                        <li role="presentation">
+                          <button
+                            class="pf-c-select__menu-item"
+                            role="option"
+                          >Needs maintenance</button>
+                        </li>
+                      </ul>
+                    </div>
+                    <input
+                      class="pf-c-form-control"
+                      id="toolbar-pagination-management-mobile-example-textInput11"
+                      name="textInput11"
+                      type="search"
+                      placeholder="Filter by name..."
+                      aria-label="Search input example"
+                    />
+                    <button
+                      class="pf-c-button pf-m-control"
+                      type="button"
+                      aria-label="Search button for search input"
+                    >
+                      <i class="fas fa-search" aria-hidden="true"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="pf-c-toolbar__item pf-m-overflow-menu">
+              <div
+                class="pf-c-overflow-menu"
+                id="toolbar-pagination-management-mobile-example-overflow-menu"
+              >
+                <div class="pf-c-overflow-menu__control">
+                  <div class="pf-c-dropdown">
+                    <button
+                      class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
+                      type="button"
+                      id="toolbar-pagination-management-mobile-example-overflow-menu-dropdown-toggle"
+                      aria-label="Overflow menu"
+                      aria-expanded="false"
+                    >
+                      <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+                    </button>
+                    <ul
+                      class="pf-c-dropdown__menu"
+                      aria-labelledby="toolbar-pagination-management-mobile-example-overflow-menu-dropdown-toggle"
+                      hidden
+                    >
+                      <li>
+                        <button class="pf-c-dropdown__menu-item">Primary</button>
+                      </li>
+                      <li>
+                        <button class="pf-c-dropdown__menu-item">Secondary</button>
+                      </li>
+                      <li>
+                        <button class="pf-c-dropdown__menu-item">Tertiary</button>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="pf-c-toolbar__item pf-m-pagination">
+              <div
+                class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
+              >
+                <div
+                  class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
+                >
+                  <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>&nbsp;of&nbsp;
+                        <b>36</b>
+                      </span>
+                      <button
+                        class="pf-c-options-menu__toggle-button"
+                        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="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-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-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>
+                  </nav>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="pf-c-toolbar__expandable-content pf-m-hidden"
+            id="toolbar-pagination-management-mobile-example-expandable-content"
+            hidden
+          ></div>
+        </div>
+      </div>
+      <div>
+        <table
+          class="pf-c-table pf-m-grid-md"
+          role="grid"
+          aria-label="This is a table with checkboxes"
+          id="toolbar-and-table-static-search-overflow-menu-collapsed-table"
+        >
+          <thead>
+            <tr role="row">
+              <td></td>
+              <th role="columnheader" scope="col">Repositories</th>
+              <th role="columnheader" scope="col">Branches</th>
+              <th role="columnheader" scope="col">Pull requests</th>
+              <th role="columnheader" scope="col">Workspaces</th>
+              <th role="columnheader" scope="col">Last commit</th>
+              <td></td>
+              <td></td>
+            </tr>
+          </thead>
+
+          <tbody role="rowgroup">
+            <tr role="row">
+              <td class="pf-c-table__check" role="cell">
+                <input
+                  type="checkbox"
+                  name="checkrow1"
+                  aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node1"
+                />
+              </td>
+              <th role="columnheader" data-label="Repository name">
+                <div>
+                  <div
+                    id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node1"
+                  >Node 1</div>
+                  <a href="#">siemur/test-space</a>
+                </div>
+              </th>
+              <td role="cell" data-label="Branches">
+                <span>
+                  <i class="fas fa-code-branch"></i> 10
+                </span>
+              </td>
+              <td role="cell" data-label="Pull requests">
+                <span>
+                  <i class="fas fa-code"></i> 25
+                </span>
+              </td>
+              <td role="cell" data-label="Workspaces">
+                <span>
+                  <i class="fas fa-cube"></i> 5
+                </span>
+              </td>
+              <td role="cell" data-label="Last commit">2 days ago</td>
+              <td role="cell" data-label="Action">
+                <a href="#">Action link</a>
+              </td>
+              <td class="pf-c-table__action" role="cell">
+                <div class="pf-c-dropdown">
+                  <button
+                    class="pf-c-dropdown__toggle pf-m-plain"
+                    id="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-1-button"
+                    aria-expanded="false"
+                    type="button"
+                    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="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-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>
+              </td>
+            </tr>
+
+            <tr role="row">
+              <td class="pf-c-table__check" role="cell">
+                <input
+                  type="checkbox"
+                  name="checkrow2"
+                  aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node2"
+                />
+              </td>
+              <th role="columnheader" data-label="Repository name">
+                <div>
+                  <div
+                    id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node2"
+                  >Node 2</div>
+                  <a href="#">siemur/test-space</a>
+                </div>
+              </th>
+              <td role="cell" data-label="Branches">
+                <span>
+                  <i class="fas fa-code-branch"></i> 8
+                </span>
+              </td>
+              <td role="cell" data-label="Pull requests">
+                <span>
+                  <i class="fas fa-code"></i> 30
+                </span>
+              </td>
+              <td role="cell" data-label="Workspaces">
+                <span>
+                  <i class="fas fa-cube"></i> 2
+                </span>
+              </td>
+              <td role="cell" data-label="Last commit">2 days ago</td>
+              <td role="cell" data-label="Action">
+                <a href="#">Action link</a>
+              </td>
+              <td class="pf-c-table__action" role="cell">
+                <div class="pf-c-dropdown">
+                  <button
+                    class="pf-c-dropdown__toggle pf-m-plain"
+                    id="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-2-button"
+                    aria-expanded="false"
+                    type="button"
+                    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="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-2-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>
+              </td>
+            </tr>
+
+            <tr role="row">
+              <td class="pf-c-table__check" role="cell">
+                <input
+                  type="checkbox"
+                  name="checkrow3"
+                  aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node3"
+                />
+              </td>
+              <th role="columnheader" data-label="Repository name">
+                <div>
+                  <div
+                    id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node3"
+                  >Node 3</div>
+                  <a href="#">siemur/test-space</a>
+                </div>
+              </th>
+              <td role="cell" data-label="Branches">
+                <span>
+                  <i class="fas fa-code-branch"></i> 12
+                </span>
+              </td>
+              <td role="cell" data-label="Pull requests">
+                <span>
+                  <i class="fas fa-code"></i> 48
+                </span>
+              </td>
+              <td role="cell" data-label="Workspaces">
+                <span>
+                  <i class="fas fa-cube"></i> 13
+                </span>
+              </td>
+              <td role="cell" data-label="Last commit">30 days ago</td>
+              <td role="cell" data-label="Action">
+                <a href="#">Action link</a>
+              </td>
+              <td class="pf-c-table__action" role="cell">
+                <div class="pf-c-dropdown">
+                  <button
+                    class="pf-c-dropdown__toggle pf-m-plain"
+                    id="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-3-button"
+                    aria-expanded="false"
+                    type="button"
+                    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="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-3-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>
+              </td>
+            </tr>
+
+            <tr role="row">
+              <td class="pf-c-table__check" role="cell">
+                <input
+                  type="checkbox"
+                  name="checkrow4"
+                  aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node4"
+                />
+              </td>
+              <th role="columnheader" data-label="Repository name">
+                <div>
+                  <div
+                    id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node4"
+                  >Node 4</div>
+                  <a href="#">siemur/test-space</a>
+                </div>
+              </th>
+              <td role="cell" data-label="Branches">
+                <span>
+                  <i class="fas fa-code-branch"></i> 3
+                </span>
+              </td>
+              <td role="cell" data-label="Pull requests">
+                <span>
+                  <i class="fas fa-code"></i> 8
+                </span>
+              </td>
+              <td role="cell" data-label="Workspaces">
+                <span>
+                  <i class="fas fa-cube"></i> 20
+                </span>
+              </td>
+              <td role="cell" data-label="Last commit">8 days ago</td>
+              <td role="cell" data-label="Action">
+                <a href="#">Action link</a>
+              </td>
+              <td class="pf-c-table__action" role="cell">
+                <div class="pf-c-dropdown">
+                  <button
+                    class="pf-c-dropdown__toggle pf-m-plain"
+                    id="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-4-button"
+                    aria-expanded="false"
+                    type="button"
+                    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="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-4-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>
+              </td>
+            </tr>
+
+            <tr role="row">
+              <td class="pf-c-table__check" role="cell">
+                <input
+                  type="checkbox"
+                  name="checkrow5"
+                  aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node5"
+                />
+              </td>
+              <td role="cell" data-label="Repository name">
+                <div>
+                  <div
+                    id="toolbar-and-table-static-search-overflow-menu-collapsed-table-node5"
+                  >Node 5</div>
+                  <a href="#">siemur/test-space</a>
+                </div>
+              </td>
+              <td role="cell" data-label="Branches">
+                <span>
+                  <i class="fas fa-code-branch"></i> 34
+                </span>
+              </td>
+              <td role="cell" data-label="Pull requests">
+                <span>
+                  <i class="fas fa-code"></i> 21
+                </span>
+              </td>
+              <td role="cell" data-label="Workspaces">
+                <span>
+                  <i class="fas fa-cube"></i> 26
+                </span>
+              </td>
+              <td role="cell" data-label="Last commit">2 days ago</td>
+              <td role="cell" data-label="Action">
+                <a href="#">Action link</a>
+              </td>
+              <td class="pf-c-table__action" role="cell">
+                <div class="pf-c-dropdown">
+                  <button
+                    class="pf-c-dropdown__toggle pf-m-plain"
+                    id="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-5-button"
+                    aria-expanded="false"
+                    type="button"
+                    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="toolbar-and-table-static-search-overflow-menu-collapsed-table-dropdown-kebab-5-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>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="pf-c-pagination pf-m-bottom">
+          <div class="pf-c-options-menu pf-m-top">
+            <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>&nbsp;of&nbsp;
+                <b>36</b>
+              </span>
+              <button
+                class="pf-c-options-menu__toggle-button"
+                id="pagination-options-menu-bottom-collapsed-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 pf-m-top"
+              aria-labelledby="pagination-options-menu-bottom-collapsed-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>
+
 ```