@patternfly/patternfly 4.177.0 → 4.179.1

package/docs/demos/Table/examples/Table.md

@@ -12,6 +12,7 @@ wrapperTag: div
     class="pf-c-skip-to-content pf-c-button pf-m-primary"
     href="#main-content-basic-demo"
   >Skip to content</a>
+
   <header class="pf-c-masthead" id="basic-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -64,6 +65,141 @@ wrapperTag: div
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
+                <div class="pf-c-toolbar__item">
+                  <nav
+                    class="pf-c-app-launcher"
+                    aria-label="Application launcher"
+                    id="basic-demo-masthead-icon-group--app-launcher"
+                  >
+                    <button
+                      class="pf-c-app-launcher__toggle"
+                      type="button"
+                      id="-button"
+                      aria-expanded="false"
+                      aria-label="Application launcher"
+                    >
+                      <i class="fas fa-th" aria-hidden="true"></i>
+                    </button>
+                    <div
+                      class="pf-c-app-launcher__menu pf-m-align-right"
+                      hidden
+                    >
+                      <div class="pf-c-app-launcher__menu-search">
+                        <input
+                          class="pf-c-form-control"
+                          type="search"
+                          aria-label="Type to filter"
+                          placeholder="Filter by name..."
+                          id="basic-demo-masthead-application-launcher-text-input"
+                          name="textInput1"
+                        />
+                      </div>
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                      <hr class="pf-c-divider" />
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                    </div>
+                  </nav>
+                </div>
                 <div class="pf-c-toolbar__item">
                   <div class="pf-c-dropdown">
                     <button
@@ -104,7 +240,7 @@ wrapperTag: div
                       type="button"
                       aria-label="Help"
                     >
-                      <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </button>
                     <ul
                       class="pf-c-dropdown__menu pf-m-align-right"
@@ -1486,6 +1622,7 @@ wrapperTag: div
     class="pf-c-skip-to-content pf-c-button pf-m-primary"
     href="#main-content-sortable-demo"
   >Skip to content</a>
+
   <header class="pf-c-masthead" id="sortable-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -1538,6 +1675,141 @@ wrapperTag: div
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
+                <div class="pf-c-toolbar__item">
+                  <nav
+                    class="pf-c-app-launcher"
+                    aria-label="Application launcher"
+                    id="sortable-demo-masthead-icon-group--app-launcher"
+                  >
+                    <button
+                      class="pf-c-app-launcher__toggle"
+                      type="button"
+                      id="-button"
+                      aria-expanded="false"
+                      aria-label="Application launcher"
+                    >
+                      <i class="fas fa-th" aria-hidden="true"></i>
+                    </button>
+                    <div
+                      class="pf-c-app-launcher__menu pf-m-align-right"
+                      hidden
+                    >
+                      <div class="pf-c-app-launcher__menu-search">
+                        <input
+                          class="pf-c-form-control"
+                          type="search"
+                          aria-label="Type to filter"
+                          placeholder="Filter by name..."
+                          id="sortable-demo-masthead-application-launcher-text-input"
+                          name="textInput1"
+                        />
+                      </div>
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                      <hr class="pf-c-divider" />
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                    </div>
+                  </nav>
+                </div>
                 <div class="pf-c-toolbar__item">
                   <div class="pf-c-dropdown">
                     <button
@@ -1578,7 +1850,7 @@ wrapperTag: div
                       type="button"
                       aria-label="Help"
                     >
-                      <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </button>
                     <ul
                       class="pf-c-dropdown__menu pf-m-align-right"
@@ -3134,6 +3406,7 @@ wrapperTag: div
     class="pf-c-skip-to-content pf-c-button pf-m-primary"
     href="#main-content-expandable-demo"
   >Skip to content</a>
+
   <header class="pf-c-masthead" id="expandable-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -3186,6 +3459,141 @@ wrapperTag: div
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
+                <div class="pf-c-toolbar__item">
+                  <nav
+                    class="pf-c-app-launcher"
+                    aria-label="Application launcher"
+                    id="expandable-demo-masthead-icon-group--app-launcher"
+                  >
+                    <button
+                      class="pf-c-app-launcher__toggle"
+                      type="button"
+                      id="-button"
+                      aria-expanded="false"
+                      aria-label="Application launcher"
+                    >
+                      <i class="fas fa-th" aria-hidden="true"></i>
+                    </button>
+                    <div
+                      class="pf-c-app-launcher__menu pf-m-align-right"
+                      hidden
+                    >
+                      <div class="pf-c-app-launcher__menu-search">
+                        <input
+                          class="pf-c-form-control"
+                          type="search"
+                          aria-label="Type to filter"
+                          placeholder="Filter by name..."
+                          id="expandable-demo-masthead-application-launcher-text-input"
+                          name="textInput1"
+                        />
+                      </div>
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                      <hr class="pf-c-divider" />
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                    </div>
+                  </nav>
+                </div>
                 <div class="pf-c-toolbar__item">
                   <div class="pf-c-dropdown">
                     <button
@@ -3226,7 +3634,7 @@ wrapperTag: div
                       type="button"
                       aria-label="Help"
                     >
-                      <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </button>
                     <ul
                       class="pf-c-dropdown__menu pf-m-align-right"
@@ -3785,59 +4193,1189 @@ wrapperTag: div
         </div>
       </div>
     </section>
-    <section class="pf-c-page__main-section pf-m-limit-width">
-      <div class="pf-c-page__main-body">
-        <div class="pf-l-gallery pf-m-gutter">
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
+    <section class="pf-c-page__main-section pf-m-no-padding pf-m-padding-on-xl">
+      <div class="pf-c-card">
+        <div class="pf-c-toolbar">
+          <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-on-xl"
+              >
+                <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="-expandable-content"
+                  >
+                    <i class="fas fa-filter" aria-hidden="true"></i>
+                  </button>
+                </div>
+                <div class="pf-c-toolbar__item pf-m-bulk-select">
+                  <div class="pf-c-dropdown">
+                    <div class="pf-c-dropdown__toggle pf-m-split-button">
+                      <label
+                        class="pf-c-dropdown__toggle-check"
+                        for="-bulk-select-toggle-check"
+                      >
+                        <input
+                          type="checkbox"
+                          id="-bulk-select-toggle-check"
+                          aria-label="Select all"
+                        />
+                      </label>
+
+                      <button
+                        class="pf-c-dropdown__toggle-button"
+                        type="button"
+                        aria-expanded="false"
+                        id="-bulk-select-toggle-button"
+                        aria-label="Dropdown toggle"
+                      >
+                        <i class="fas fa-caret-down" aria-hidden="true"></i>
+                      </button>
+                    </div>
+                    <ul class="pf-c-dropdown__menu" hidden>
+                      <li>
+                        <button
+                          class="pf-c-dropdown__menu-item"
+                          type="button"
+                        >Select all</button>
+                      </li>
+                      <li>
+                        <button
+                          class="pf-c-dropdown__menu-item"
+                          type="button"
+                        >Select none</button>
+                      </li>
+                      <li>
+                        <button
+                          class="pf-c-dropdown__menu-item"
+                          type="button"
+                        >Other action</button>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                <div class="pf-c-toolbar__item pf-m-search-filter">
+                  <div
+                    class="pf-c-input-group"
+                    aria-label="search filter"
+                    role="group"
+                  >
+                    <div class="pf-c-dropdown">
+                      <button
+                        class="pf-c-dropdown__toggle"
+                        id="--button"
+                        aria-expanded="false"
+                        type="button"
+                      >
+                        <span class="pf-c-dropdown__toggle-text">Name</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="--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>
+                    <input
+                      class="pf-c-form-control"
+                      type="search"
+                      id="--search-filter-input"
+                      name="-search-filter-input"
+                      aria-label="input with dropdown and button"
+                      aria-describedby="--button"
+                    />
+                  </div>
+                </div>
+
+                <div class="pf-c-toolbar__group pf-m-filter-group">
+                  <div class="pf-c-toolbar__item">
+                    <div class="pf-c-select">
+                      <span id="-select-checkbox-status-label" hidden>Choose one</span>
+
+                      <button
+                        class="pf-c-select__toggle"
+                        type="button"
+                        id="-select-checkbox-status-toggle"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
+                      >
+                        <div class="pf-c-select__toggle-wrapper">
+                          <span class="pf-c-select__toggle-text">Status</span>
+                        </div>
+                        <span class="pf-c-select__toggle-arrow">
+                          <i class="fas fa-caret-down" aria-hidden="true"></i>
+                        </span>
+                      </button>
+
+                      <div class="pf-c-select__menu" hidden>
+                        <fieldset
+                          class="pf-c-select__menu-fieldset"
+                          aria-label="Select input"
+                        >
+                          <label
+                            class="pf-c-check pf-c-select__menu-item pf-m-description"
+                            for="-select-checkbox-status-active"
+                          >
+                            <input
+                              class="pf-c-check__input"
+                              type="checkbox"
+                              id="-select-checkbox-status-active"
+                              name="-select-checkbox-status-active"
+                            />
+
+                            <span class="pf-c-check__label">Active</span>
+                            <span
+                              class="pf-c-check__description"
+                            >This is a description</span>
+                          </label>
+                          <label
+                            class="pf-c-check pf-c-select__menu-item pf-m-description"
+                            for="-select-checkbox-status-canceled"
+                          >
+                            <input
+                              class="pf-c-check__input"
+                              type="checkbox"
+                              id="-select-checkbox-status-canceled"
+                              name="-select-checkbox-status-canceled"
+                            />
+
+                            <span class="pf-c-check__label">Canceled</span>
+                            <span
+                              class="pf-c-check__description"
+                            >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
+                          </label>
+                          <label
+                            class="pf-c-check pf-c-select__menu-item"
+                            for="-select-checkbox-status-paused"
+                          >
+                            <input
+                              class="pf-c-check__input"
+                              type="checkbox"
+                              id="-select-checkbox-status-paused"
+                              name="-select-checkbox-status-paused"
+                            />
+
+                            <span class="pf-c-check__label">Paused</span>
+                          </label>
+                          <label
+                            class="pf-c-check pf-c-select__menu-item"
+                            for="-select-checkbox-status-warning"
+                          >
+                            <input
+                              class="pf-c-check__input"
+                              type="checkbox"
+                              id="-select-checkbox-status-warning"
+                              name="-select-checkbox-status-warning"
+                            />
+
+                            <span class="pf-c-check__label">Warning</span>
+                          </label>
+                          <label
+                            class="pf-c-check pf-c-select__menu-item"
+                            for="-select-checkbox-status-restarted"
+                          >
+                            <input
+                              class="pf-c-check__input"
+                              type="checkbox"
+                              id="-select-checkbox-status-restarted"
+                              name="-select-checkbox-status-restarted"
+                            />
+
+                            <span class="pf-c-check__label">Restarted</span>
+                          </label>
+                        </fieldset>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="pf-c-toolbar__item">
+                    <div class="pf-c-select">
+                      <span id="-select-checkbox-risk-label" hidden>Choose one</span>
+
+                      <button
+                        class="pf-c-select__toggle"
+                        type="button"
+                        id="-select-checkbox-risk-toggle"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        aria-labelledby="-select-checkbox-risk-label -select-checkbox-risk-toggle"
+                      >
+                        <div class="pf-c-select__toggle-wrapper">
+                          <span class="pf-c-select__toggle-text">Risk</span>
+                        </div>
+                        <span class="pf-c-select__toggle-arrow">
+                          <i class="fas fa-caret-down" aria-hidden="true"></i>
+                        </span>
+                      </button>
+
+                      <div class="pf-c-select__menu" hidden>
+                        <fieldset
+                          class="pf-c-select__menu-fieldset"
+                          aria-label="Select input"
+                        >
+                          <label
+                            class="pf-c-check pf-c-select__menu-item pf-m-description"
+                            for="-select-checkbox-risk-active"
+                          >
+                            <input
+                              class="pf-c-check__input"
+                              type="checkbox"
+                              id="-select-checkbox-risk-active"
+                              name="-select-checkbox-risk-active"
+                            />
+
+                            <span class="pf-c-check__label">Active</span>
+                            <span
+                              class="pf-c-check__description"
+                            >This is a description</span>
+                          </label>
+                          <label
+                            class="pf-c-check pf-c-select__menu-item pf-m-description"
+                            for="-select-checkbox-risk-canceled"
+                          >
+                            <input
+                              class="pf-c-check__input"
+                              type="checkbox"
+                              id="-select-checkbox-risk-canceled"
+                              name="-select-checkbox-risk-canceled"
+                            />
+
+                            <span class="pf-c-check__label">Canceled</span>
+                            <span
+                              class="pf-c-check__description"
+                            >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
+                          </label>
+                          <label
+                            class="pf-c-check pf-c-select__menu-item"
+                            for="-select-checkbox-risk-paused"
+                          >
+                            <input
+                              class="pf-c-check__input"
+                              type="checkbox"
+                              id="-select-checkbox-risk-paused"
+                              name="-select-checkbox-risk-paused"
+                            />
+
+                            <span class="pf-c-check__label">Paused</span>
+                          </label>
+                          <label
+                            class="pf-c-check pf-c-select__menu-item"
+                            for="-select-checkbox-risk-warning"
+                          >
+                            <input
+                              class="pf-c-check__input"
+                              type="checkbox"
+                              id="-select-checkbox-risk-warning"
+                              name="-select-checkbox-risk-warning"
+                            />
+
+                            <span class="pf-c-check__label">Warning</span>
+                          </label>
+                          <label
+                            class="pf-c-check pf-c-select__menu-item"
+                            for="-select-checkbox-risk-restarted"
+                          >
+                            <input
+                              class="pf-c-check__input"
+                              type="checkbox"
+                              id="-select-checkbox-risk-restarted"
+                              name="-select-checkbox-risk-restarted"
+                            />
+
+                            <span class="pf-c-check__label">Restarted</span>
+                          </label>
+                        </fieldset>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="pf-c-toolbar__item">
+                <button
+                  class="pf-c-button pf-m-plain"
+                  type="button"
+                  aria-label="Sort"
+                >
+                  <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
+                </button>
+              </div>
+
+              <div class="pf-c-toolbar__item pf-m-pagination">
+                <div class="pf-c-pagination pf-m-compact">
+                  <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="-top-pagination-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="-top-pagination-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="Toolbar top 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
+              class="pf-c-toolbar__expandable-content pf-m-hidden"
+              id="-expandable-content"
+              hidden
+            ></div>
+          </div>
+        </div>
+        <table
+          class="pf-c-table pf-m-expandable pf-m-grid-md"
+          role="grid"
+          aria-label="Expandable table example"
+          id="expandable-demo-table"
+        >
+          <thead>
+            <tr role="row">
+              <td class="pf-c-table__toggle" role="cell">
+                <button
+                  class="pf-c-button pf-m-plain"
+                  id="expandable-demo-table-expandable-toggle-thead"
+                  aria-label="Expand all"
+                >
+                  <div class="pf-c-table__toggle-icon">
+                    <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  </div>
+                </button>
+              </td>
+
+              <td></td>
+              <th
+                class="pf-m-width-30"
+                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">Work spaces</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__toggle" role="cell">
+                <button
+                  class="pf-c-button pf-m-plain"
+                  aria-labelledby="expandable-demo-table-node1 expandable-toggle1"
+                  id="expandable-toggle1"
+                  aria-label="Details"
+                  aria-controls="expandable-demo-table-content1"
+                >
+                  <div class="pf-c-table__toggle-icon">
+                    <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  </div>
+                </button>
+              </td>
+
+              <td class="pf-c-table__check" role="cell">
+                <input
+                  type="checkbox"
+                  name="checkrow1"
+                  aria-labelledby="expandable-demo-table-node1"
+                />
+              </td>
+              <th role="columnheader" data-label="Repository name">
+                <div>
+                  <div id="expandable-demo-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="Work spaces">
+                <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="expandable-demo-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="expandable-demo-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 class="pf-c-table__expandable-row" role="row">
+              <td role="cell"></td>
+
+              <td role="cell"></td>
+
+              <td
+                class
+                role="cell"
+                colspan="7"
+                id="expandable-demo-table-content1"
+              >
+                <div class="pf-c-table__expandable-row-content">
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+                  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </div>
+              </td>
+              <td role="cell"></td>
+            </tr>
+          </tbody>
+
+          <tbody class="pf-m-expanded" role="rowgroup">
+            <tr role="row">
+              <td class="pf-c-table__toggle" role="cell">
+                <button
+                  class="pf-c-button pf-m-plain pf-m-expanded"
+                  aria-labelledby="expandable-demo-table-node2 expandable-toggle2"
+                  id="expandable-toggle2"
+                  aria-label="Details"
+                  aria-controls="expandable-demo-table-content2"
+                  aria-expanded="true"
+                >
+                  <div class="pf-c-table__toggle-icon">
+                    <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  </div>
+                </button>
+              </td>
+
+              <td class="pf-c-table__check" role="cell">
+                <input
+                  type="checkbox"
+                  name="checkrow2"
+                  aria-labelledby="expandable-demo-table-node2"
+                />
+              </td>
+              <td role="cell" data-label="Repository name">
+                <div>
+                  <div id="expandable-demo-table-node2">Node 2</div>
+                  <a href="#">siemur/test-space</a>
+                </div>
+              </td>
+              <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> 5
+                </span>
+              </td>
+              <td role="cell" data-label="Work spaces">
+                <span>
+                  <i class="fas fa-cube"></i> 8
+                </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="expandable-demo-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="expandable-demo-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 class="pf-c-table__expandable-row pf-m-expanded" role="row">
+              <td role="cell"></td>
+
+              <td role="cell"></td>
+
+              <td
+                class
+                role="cell"
+                colspan="5"
+                id="expandable-demo-table-content2"
+              >
+                <div class="pf-c-table__expandable-row-content">
+                  <div class="pf-c-content">
+                    <p>
+                      Git URL:
+                      <small>http://github.com/mindreeper2420/rhuxd.git</small>
+                    </p>
+                    <p>
+                      Latest commit SHA1
+                      <small>64ae92893d7a98c71b3ef56835ed1c96354526be</small>
+                    </p>
+                    <p>
+                      Status
+                      <small>20 total files changed</small>
+                    </p>
+                    <p>
+                      License
+                      <small>Apache License 2.9</small>
+                    </p>
+                  </div>
+                </div>
+              </td>
+              <td role="cell"></td>
+              <td role="cell"></td>
+            </tr>
+          </tbody>
+
+          <tbody role="rowgroup">
+            <tr role="row">
+              <td class="pf-c-table__toggle" role="cell">
+                <button
+                  class="pf-c-button pf-m-plain"
+                  aria-labelledby="expandable-demo-table-node3 expandable-toggle3"
+                  id="expandable-toggle3"
+                  aria-label="Details"
+                  aria-controls="expandable-demo-table-content3"
+                >
+                  <div class="pf-c-table__toggle-icon">
+                    <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  </div>
+                </button>
+              </td>
+
+              <td class="pf-c-table__check" role="cell">
+                <input
+                  type="checkbox"
+                  name="checkrow3"
+                  aria-labelledby="expandable-demo-table-node3"
+                />
+              </td>
+              <th role="columnheader" data-label="Repository name">
+                <div>
+                  <div id="expandable-demo-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> 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="Work spaces">
+                <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="expandable-demo-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="expandable-demo-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 class="pf-c-table__expandable-row" role="row">
+              <td
+                class
+                role="cell"
+                colspan="9"
+                id="expandable-demo-table-content3"
+              >
+                <div class="pf-c-table__expandable-row-content">
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+                  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </div>
+              </td>
+            </tr>
+          </tbody>
+
+          <tbody role="rowgroup">
+            <tr role="row">
+              <td class="pf-c-table__toggle" role="cell">
+                <button
+                  class="pf-c-button pf-m-plain"
+                  aria-labelledby="expandable-demo-table-node4 expandable-toggle4"
+                  id="expandable-toggle4"
+                  aria-label="Details"
+                  aria-controls="expandable-demo-table-content4"
+                >
+                  <div class="pf-c-table__toggle-icon">
+                    <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  </div>
+                </button>
+              </td>
+
+              <td class="pf-c-table__check" role="cell">
+                <input
+                  type="checkbox"
+                  name="checkrow4"
+                  aria-labelledby="expandable-demo-table-node4"
+                />
+              </td>
+              <th role="columnheader" data-label="Repository name">
+                <div>
+                  <div id="expandable-demo-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> 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="Work spaces">
+                <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="expandable-demo-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="expandable-demo-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>
+
+            <tr class="pf-c-table__expandable-row" role="row">
+              <td
+                class
+                role="cell"
+                colspan="9"
+                id="expandable-demo-table-content4"
+              >
+                <div class="pf-c-table__expandable-row-content">
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+                  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </div>
+              </td>
+            </tr>
+          </tbody>
+
+          <tbody role="rowgroup">
+            <tr role="row">
+              <td class="pf-c-table__toggle" role="cell">
+                <button
+                  class="pf-c-button pf-m-plain"
+                  aria-labelledby="expandable-demo-table-node5 expandable-toggle5"
+                  id="expandable-toggle5"
+                  aria-label="Details"
+                  aria-controls="expandable-demo-table-content5"
+                >
+                  <div class="pf-c-table__toggle-icon">
+                    <i class="fas fa-angle-down" aria-hidden="true"></i>
+                  </div>
+                </button>
+              </td>
+
+              <td class="pf-c-table__check" role="cell">
+                <input
+                  type="checkbox"
+                  name="checkrow5"
+                  aria-labelledby="expandable-demo-table-node5"
+                />
+              </td>
+              <td role="cell" data-label="Repository name">
+                <div>
+                  <div id="expandable-demo-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> 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="Work spaces">
+                <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="expandable-demo-table-dropdown-kebab-6-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="expandable-demo-table-dropdown-kebab-6-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 class="pf-c-table__expandable-row" role="row">
+              <td
+                class
+                role="cell"
+                colspan="9"
+                id="expandable-demo-table-content5"
+              >
+                <div class="pf-c-table__expandable-row-content">
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+                  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </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="{{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 pf-m-top"
+              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>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</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>
-          </div>
+          </nav>
         </div>
       </div>
     </section>
@@ -3854,6 +5392,7 @@ wrapperTag: div
     class="pf-c-skip-to-content pf-c-button pf-m-primary"
     href="#main-content-compact-demo"
   >Skip to content</a>
+
   <header class="pf-c-masthead" id="compact-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -3906,6 +5445,141 @@ wrapperTag: div
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
+                <div class="pf-c-toolbar__item">
+                  <nav
+                    class="pf-c-app-launcher"
+                    aria-label="Application launcher"
+                    id="compact-demo-masthead-icon-group--app-launcher"
+                  >
+                    <button
+                      class="pf-c-app-launcher__toggle"
+                      type="button"
+                      id="-button"
+                      aria-expanded="false"
+                      aria-label="Application launcher"
+                    >
+                      <i class="fas fa-th" aria-hidden="true"></i>
+                    </button>
+                    <div
+                      class="pf-c-app-launcher__menu pf-m-align-right"
+                      hidden
+                    >
+                      <div class="pf-c-app-launcher__menu-search">
+                        <input
+                          class="pf-c-form-control"
+                          type="search"
+                          aria-label="Type to filter"
+                          placeholder="Filter by name..."
+                          id="compact-demo-masthead-application-launcher-text-input"
+                          name="textInput1"
+                        />
+                      </div>
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                      <hr class="pf-c-divider" />
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                    </div>
+                  </nav>
+                </div>
                 <div class="pf-c-toolbar__item">
                   <div class="pf-c-dropdown">
                     <button
@@ -3946,7 +5620,7 @@ wrapperTag: div
                       type="button"
                       aria-label="Help"
                     >
-                      <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </button>
                     <ul
                       class="pf-c-dropdown__menu pf-m-align-right"
@@ -5360,6 +7034,7 @@ wrapperTag: div
     class="pf-c-skip-to-content pf-c-button pf-m-primary"
     href="#main-content-compound-expansion-demo"
   >Skip to content</a>
+
   <header class="pf-c-masthead" id="compound-expansion-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -5412,6 +7087,141 @@ wrapperTag: div
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
+                <div class="pf-c-toolbar__item">
+                  <nav
+                    class="pf-c-app-launcher"
+                    aria-label="Application launcher"
+                    id="compound-expansion-demo-masthead-icon-group--app-launcher"
+                  >
+                    <button
+                      class="pf-c-app-launcher__toggle"
+                      type="button"
+                      id="-button"
+                      aria-expanded="false"
+                      aria-label="Application launcher"
+                    >
+                      <i class="fas fa-th" aria-hidden="true"></i>
+                    </button>
+                    <div
+                      class="pf-c-app-launcher__menu pf-m-align-right"
+                      hidden
+                    >
+                      <div class="pf-c-app-launcher__menu-search">
+                        <input
+                          class="pf-c-form-control"
+                          type="search"
+                          aria-label="Type to filter"
+                          placeholder="Filter by name..."
+                          id="compound-expansion-demo-masthead-application-launcher-text-input"
+                          name="textInput1"
+                        />
+                      </div>
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                      <hr class="pf-c-divider" />
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                    </div>
+                  </nav>
+                </div>
                 <div class="pf-c-toolbar__item">
                   <div class="pf-c-dropdown">
                     <button
@@ -5452,7 +7262,7 @@ wrapperTag: div
                       type="button"
                       aria-label="Help"
                     >
-                      <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </button>
                     <ul
                       class="pf-c-dropdown__menu pf-m-align-right"
@@ -10080,6 +11890,7 @@ wrapperTag: div
     class="pf-c-skip-to-content pf-c-button pf-m-primary"
     href="#main-content-loading-state-demo"
   >Skip to content</a>
+
   <header class="pf-c-masthead" id="loading-state-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -10132,6 +11943,141 @@ wrapperTag: div
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
+                <div class="pf-c-toolbar__item">
+                  <nav
+                    class="pf-c-app-launcher"
+                    aria-label="Application launcher"
+                    id="loading-state-demo-masthead-icon-group--app-launcher"
+                  >
+                    <button
+                      class="pf-c-app-launcher__toggle"
+                      type="button"
+                      id="-button"
+                      aria-expanded="false"
+                      aria-label="Application launcher"
+                    >
+                      <i class="fas fa-th" aria-hidden="true"></i>
+                    </button>
+                    <div
+                      class="pf-c-app-launcher__menu pf-m-align-right"
+                      hidden
+                    >
+                      <div class="pf-c-app-launcher__menu-search">
+                        <input
+                          class="pf-c-form-control"
+                          type="search"
+                          aria-label="Type to filter"
+                          placeholder="Filter by name..."
+                          id="loading-state-demo-masthead-application-launcher-text-input"
+                          name="textInput1"
+                        />
+                      </div>
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                      <hr class="pf-c-divider" />
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                    </div>
+                  </nav>
+                </div>
                 <div class="pf-c-toolbar__item">
                   <div class="pf-c-dropdown">
                     <button
@@ -10172,7 +12118,7 @@ wrapperTag: div
                       type="button"
                       aria-label="Help"
                     >
-                      <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </button>
                     <ul
                       class="pf-c-dropdown__menu pf-m-align-right"
@@ -10803,6 +12749,7 @@ wrapperTag: div
     class="pf-c-skip-to-content pf-c-button pf-m-primary"
     href="#main-content-empty-state-demo"
   >Skip to content</a>
+
   <header class="pf-c-masthead" id="empty-state-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -10855,6 +12802,141 @@ wrapperTag: div
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
+                <div class="pf-c-toolbar__item">
+                  <nav
+                    class="pf-c-app-launcher"
+                    aria-label="Application launcher"
+                    id="empty-state-demo-masthead-icon-group--app-launcher"
+                  >
+                    <button
+                      class="pf-c-app-launcher__toggle"
+                      type="button"
+                      id="-button"
+                      aria-expanded="false"
+                      aria-label="Application launcher"
+                    >
+                      <i class="fas fa-th" aria-hidden="true"></i>
+                    </button>
+                    <div
+                      class="pf-c-app-launcher__menu pf-m-align-right"
+                      hidden
+                    >
+                      <div class="pf-c-app-launcher__menu-search">
+                        <input
+                          class="pf-c-form-control"
+                          type="search"
+                          aria-label="Type to filter"
+                          placeholder="Filter by name..."
+                          id="empty-state-demo-masthead-application-launcher-text-input"
+                          name="textInput1"
+                        />
+                      </div>
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                      <hr class="pf-c-divider" />
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                    </div>
+                  </nav>
+                </div>
                 <div class="pf-c-toolbar__item">
                   <div class="pf-c-dropdown">
                     <button
@@ -10895,7 +12977,7 @@ wrapperTag: div
                       type="button"
                       aria-label="Help"
                     >
-                      <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </button>
                     <ul
                       class="pf-c-dropdown__menu pf-m-align-right"
@@ -11529,6 +13611,7 @@ wrapperTag: div
     class="pf-c-skip-to-content pf-c-button pf-m-primary"
     href="#main-content-static-bottom-pagination-demo"
   >Skip to content</a>
+
   <header class="pf-c-masthead" id="static-bottom-pagination-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -11581,6 +13664,141 @@ wrapperTag: div
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
+                <div class="pf-c-toolbar__item">
+                  <nav
+                    class="pf-c-app-launcher"
+                    aria-label="Application launcher"
+                    id="static-bottom-pagination-demo-masthead-icon-group--app-launcher"
+                  >
+                    <button
+                      class="pf-c-app-launcher__toggle"
+                      type="button"
+                      id="-button"
+                      aria-expanded="false"
+                      aria-label="Application launcher"
+                    >
+                      <i class="fas fa-th" aria-hidden="true"></i>
+                    </button>
+                    <div
+                      class="pf-c-app-launcher__menu pf-m-align-right"
+                      hidden
+                    >
+                      <div class="pf-c-app-launcher__menu-search">
+                        <input
+                          class="pf-c-form-control"
+                          type="search"
+                          aria-label="Type to filter"
+                          placeholder="Filter by name..."
+                          id="static-bottom-pagination-demo-masthead-application-launcher-text-input"
+                          name="textInput1"
+                        />
+                      </div>
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                      <hr class="pf-c-divider" />
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                    </div>
+                  </nav>
+                </div>
                 <div class="pf-c-toolbar__item">
                   <div class="pf-c-dropdown">
                     <button
@@ -11621,7 +13839,7 @@ wrapperTag: div
                       type="button"
                       aria-label="Help"
                     >
-                      <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </button>
                     <ul
                       class="pf-c-dropdown__menu pf-m-align-right"
@@ -13175,6 +15393,7 @@ wrapperTag: div
     class="pf-c-skip-to-content pf-c-button pf-m-primary"
     href="#main-content-column-management-demo"
   >Skip to content</a>
+
   <header class="pf-c-masthead" id="column-management-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -13227,6 +15446,141 @@ wrapperTag: div
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
+                <div class="pf-c-toolbar__item">
+                  <nav
+                    class="pf-c-app-launcher"
+                    aria-label="Application launcher"
+                    id="column-management-demo-masthead-icon-group--app-launcher"
+                  >
+                    <button
+                      class="pf-c-app-launcher__toggle"
+                      type="button"
+                      id="-button"
+                      aria-expanded="false"
+                      aria-label="Application launcher"
+                    >
+                      <i class="fas fa-th" aria-hidden="true"></i>
+                    </button>
+                    <div
+                      class="pf-c-app-launcher__menu pf-m-align-right"
+                      hidden
+                    >
+                      <div class="pf-c-app-launcher__menu-search">
+                        <input
+                          class="pf-c-form-control"
+                          type="search"
+                          aria-label="Type to filter"
+                          placeholder="Filter by name..."
+                          id="column-management-demo-masthead-application-launcher-text-input"
+                          name="textInput1"
+                        />
+                      </div>
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                      <hr class="pf-c-divider" />
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                    </div>
+                  </nav>
+                </div>
                 <div class="pf-c-toolbar__item">
                   <div class="pf-c-dropdown">
                     <button
@@ -13267,7 +15621,7 @@ wrapperTag: div
                       type="button"
                       aria-label="Help"
                     >
-                      <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </button>
                     <ul
                       class="pf-c-dropdown__menu pf-m-align-right"
@@ -14901,6 +17255,7 @@ wrapperTag: div
     class="pf-c-skip-to-content pf-c-button pf-m-primary"
     href="#main-content-sticky-header-demo"
   >Skip to content</a>
+
   <header class="pf-c-masthead" id="sticky-header-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -14953,6 +17308,141 @@ wrapperTag: div
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
+                <div class="pf-c-toolbar__item">
+                  <nav
+                    class="pf-c-app-launcher"
+                    aria-label="Application launcher"
+                    id="sticky-header-demo-masthead-icon-group--app-launcher"
+                  >
+                    <button
+                      class="pf-c-app-launcher__toggle"
+                      type="button"
+                      id="-button"
+                      aria-expanded="false"
+                      aria-label="Application launcher"
+                    >
+                      <i class="fas fa-th" aria-hidden="true"></i>
+                    </button>
+                    <div
+                      class="pf-c-app-launcher__menu pf-m-align-right"
+                      hidden
+                    >
+                      <div class="pf-c-app-launcher__menu-search">
+                        <input
+                          class="pf-c-form-control"
+                          type="search"
+                          aria-label="Type to filter"
+                          placeholder="Filter by name..."
+                          id="sticky-header-demo-masthead-application-launcher-text-input"
+                          name="textInput1"
+                        />
+                      </div>
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                      <hr class="pf-c-divider" />
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                    </div>
+                  </nav>
+                </div>
                 <div class="pf-c-toolbar__item">
                   <div class="pf-c-dropdown">
                     <button
@@ -14993,7 +17483,7 @@ wrapperTag: div
                       type="button"
                       aria-label="Help"
                     >
-                      <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </button>
                     <ul
                       class="pf-c-dropdown__menu pf-m-align-right"
@@ -16547,6 +19037,7 @@ wrapperTag: div
     class="pf-c-skip-to-content pf-c-button pf-m-primary"
     href="#main-content-sticky-first-column-demo"
   >Skip to content</a>
+
   <header class="pf-c-masthead" id="sticky-first-column-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -16599,6 +19090,141 @@ wrapperTag: div
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
+                <div class="pf-c-toolbar__item">
+                  <nav
+                    class="pf-c-app-launcher"
+                    aria-label="Application launcher"
+                    id="sticky-first-column-demo-masthead-icon-group--app-launcher"
+                  >
+                    <button
+                      class="pf-c-app-launcher__toggle"
+                      type="button"
+                      id="-button"
+                      aria-expanded="false"
+                      aria-label="Application launcher"
+                    >
+                      <i class="fas fa-th" aria-hidden="true"></i>
+                    </button>
+                    <div
+                      class="pf-c-app-launcher__menu pf-m-align-right"
+                      hidden
+                    >
+                      <div class="pf-c-app-launcher__menu-search">
+                        <input
+                          class="pf-c-form-control"
+                          type="search"
+                          aria-label="Type to filter"
+                          placeholder="Filter by name..."
+                          id="sticky-first-column-demo-masthead-application-launcher-text-input"
+                          name="textInput1"
+                        />
+                      </div>
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                      <hr class="pf-c-divider" />
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                    </div>
+                  </nav>
+                </div>
                 <div class="pf-c-toolbar__item">
                   <div class="pf-c-dropdown">
                     <button
@@ -16639,7 +19265,7 @@ wrapperTag: div
                       type="button"
                       aria-label="Help"
                     >
-                      <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </button>
                     <ul
                       class="pf-c-dropdown__menu pf-m-align-right"
@@ -18119,6 +20745,7 @@ wrapperTag: div
     class="pf-c-skip-to-content pf-c-button pf-m-primary"
     href="#main-content-sticky-multiple-columns-demo"
   >Skip to content</a>
+
   <header class="pf-c-masthead" id="sticky-multiple-columns-demo-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -18171,6 +20798,141 @@ wrapperTag: div
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
+                <div class="pf-c-toolbar__item">
+                  <nav
+                    class="pf-c-app-launcher"
+                    aria-label="Application launcher"
+                    id="sticky-multiple-columns-demo-masthead-icon-group--app-launcher"
+                  >
+                    <button
+                      class="pf-c-app-launcher__toggle"
+                      type="button"
+                      id="-button"
+                      aria-expanded="false"
+                      aria-label="Application launcher"
+                    >
+                      <i class="fas fa-th" aria-hidden="true"></i>
+                    </button>
+                    <div
+                      class="pf-c-app-launcher__menu pf-m-align-right"
+                      hidden
+                    >
+                      <div class="pf-c-app-launcher__menu-search">
+                        <input
+                          class="pf-c-form-control"
+                          type="search"
+                          aria-label="Type to filter"
+                          placeholder="Filter by name..."
+                          id="sticky-multiple-columns-demo-masthead-application-launcher-text-input"
+                          name="textInput1"
+                        />
+                      </div>
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                      <hr class="pf-c-divider" />
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                    </div>
+                  </nav>
+                </div>
                 <div class="pf-c-toolbar__item">
                   <div class="pf-c-dropdown">
                     <button
@@ -18211,7 +20973,7 @@ wrapperTag: div
                       type="button"
                       aria-label="Help"
                     >
-                      <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </button>
                     <ul
                       class="pf-c-dropdown__menu pf-m-align-right"
@@ -19710,6 +22472,7 @@ wrapperTag: div
     class="pf-c-skip-to-content pf-c-button pf-m-primary"
     href="#main-content-sticky-header-and-multiple columns-demo"
   >Skip to content</a>
+
   <header
     class="pf-c-masthead"
     id="sticky-header-and-multiple columns-demo-masthead"
@@ -19765,6 +22528,141 @@ wrapperTag: div
               <div
                 class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
               >
+                <div class="pf-c-toolbar__item">
+                  <nav
+                    class="pf-c-app-launcher"
+                    aria-label="Application launcher"
+                    id="sticky-header-and-multiple columns-demo-masthead-icon-group--app-launcher"
+                  >
+                    <button
+                      class="pf-c-app-launcher__toggle"
+                      type="button"
+                      id="-button"
+                      aria-expanded="false"
+                      aria-label="Application launcher"
+                    >
+                      <i class="fas fa-th" aria-hidden="true"></i>
+                    </button>
+                    <div
+                      class="pf-c-app-launcher__menu pf-m-align-right"
+                      hidden
+                    >
+                      <div class="pf-c-app-launcher__menu-search">
+                        <input
+                          class="pf-c-form-control"
+                          type="search"
+                          aria-label="Type to filter"
+                          placeholder="Filter by name..."
+                          id="sticky-header-and-multiple columns-demo-masthead-application-launcher-text-input"
+                          name="textInput1"
+                        />
+                      </div>
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                      <hr class="pf-c-divider" />
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                    </div>
+                  </nav>
+                </div>
                 <div class="pf-c-toolbar__item">
                   <div class="pf-c-dropdown">
                     <button
@@ -19805,7 +22703,7 @@ wrapperTag: div
                       type="button"
                       aria-label="Help"
                     >
-                      <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
                     </button>
                     <ul
                       class="pf-c-dropdown__menu pf-m-align-right"