@patternfly/patternfly 4.195.0 → 4.196.2

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

@@ -2,7 +2,9 @@
 id: Table
 section: components
 wrapperTag: div
----## Demos
+---import './Table.css'
+
+## Demos
 
 ### Basic
 
@@ -25473,3 +25475,1092 @@ wrapperTag: div
 </div>
 
 ```
+
+### Cell with image alignment
+
+By default, table cell alignment is set to baseline. This retains vertical alignment with varying text size, but can cause visual inconsistencies with images. The vertical alignment of images within table cells may need to be specified to provide proper alignment.
+
+```html isFullscreen
+<div class="pf-c-page" id="image-alignment-demo">
+  <a
+    class="pf-c-skip-to-content pf-c-button pf-m-primary"
+    href="#main-content-image-alignment-demo"
+  >Skip to content</a>
+  <header class="pf-c-masthead" id="image-alignment-demo-masthead">
+    <span class="pf-c-masthead__toggle">
+      <button
+        class="pf-c-button pf-m-plain"
+        type="button"
+        aria-label="Global navigation"
+      >
+        <i class="fas fa-bars" aria-hidden="true"></i>
+      </button>
+    </span>
+    <div class="pf-c-masthead__main">
+      <a class="pf-c-masthead__brand" href="#">
+        <picture
+          class="pf-c-brand pf-m-picture"
+          style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
+        >
+          <source
+            media="(min-width: 768px)"
+            srcset="/assets/images/logo__pf--reverse-on-md.svg"
+          />
+          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
+          <img
+            src="/assets/images/logo__pf--reverse--base.png"
+            alt="Fallback patternFly default logo"
+          />
+        </picture>
+      </a>
+    </div>
+    <div class="pf-c-masthead__content">
+      <div
+        class="pf-c-toolbar pf-m-full-height pf-m-static"
+        id="image-alignment-demo-masthead-toolbar"
+      >
+        <div class="pf-c-toolbar__content">
+          <div class="pf-c-toolbar__content-section">
+            <div
+              class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
+            >
+              <div class="pf-c-toolbar__item">
+                <button
+                  class="pf-c-button pf-m-plain"
+                  type="button"
+                  aria-label="Notifications"
+                >
+                  <span class="pf-c-notification-badge">
+                    <i class="pf-icon-bell" aria-hidden="true"></i>
+                  </span>
+                </button>
+              </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="image-alignment-demo-masthead-icon-group--app-launcher"
+                  >
+                    <button
+                      class="pf-c-app-launcher__toggle"
+                      type="button"
+                      id="image-alignment-demo-masthead-icon-group--app-launcher-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">
+                        <div class="pf-c-search-input">
+                          <div class="pf-c-search-input__bar">
+                            <span class="pf-c-search-input__text">
+                              <span class="pf-c-search-input__icon">
+                                <i
+                                  class="fas fa-search fa-fw"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <input
+                                class="pf-c-search-input__text-input"
+                                type="text"
+                                placeholder="Filter by name"
+                                aria-label="Filter by name"
+                              />
+                            </span>
+                          </div>
+                        </div>
+                      </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
+                      class="pf-c-dropdown__toggle pf-m-plain"
+                      id="image-alignment-demo-masthead-settings-button"
+                      aria-expanded="false"
+                      type="button"
+                      aria-label="Settings"
+                    >
+                      <i class="fas fa-cog" aria-hidden="true"></i>
+                    </button>
+                    <ul
+                      class="pf-c-dropdown__menu pf-m-align-right"
+                      aria-labelledby="image-alignment-demo-masthead-settings-button"
+                      hidden
+                    >
+                      <li>
+                        <button
+                          class="pf-c-dropdown__menu-item"
+                          type="button"
+                        >Settings</button>
+                      </li>
+                      <li>
+                        <button
+                          class="pf-c-dropdown__menu-item"
+                          type="button"
+                        >Use the beta release</button>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+                <div class="pf-c-toolbar__item">
+                  <div class="pf-c-dropdown">
+                    <button
+                      class="pf-c-dropdown__toggle pf-m-plain"
+                      id="image-alignment-demo-masthead-help-button"
+                      aria-expanded="false"
+                      type="button"
+                      aria-label="Help"
+                    >
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
+                    </button>
+                    <ul
+                      class="pf-c-dropdown__menu pf-m-align-right"
+                      aria-labelledby="image-alignment-demo-masthead-help-button"
+                      hidden
+                    >
+                      <li>
+                        <button
+                          class="pf-c-dropdown__menu-item"
+                          type="button"
+                        >Support options</button>
+                      </li>
+                      <li>
+                        <button
+                          class="pf-c-dropdown__menu-item"
+                          type="button"
+                        >Open support case</button>
+                      </li>
+                      <li>
+                        <button
+                          class="pf-c-dropdown__menu-item"
+                          type="button"
+                        >API documentation</button>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
+                <div class="pf-c-dropdown">
+                  <button
+                    class="pf-c-menu-toggle pf-m-plain"
+                    type="button"
+                    aria-expanded="false"
+                    aria-label="Actions"
+                  >
+                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+                  </button>
+                  <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
+                    <div class="pf-c-menu__content">
+                      <section class="pf-c-menu__group pf-m-hidden-on-sm">
+                        <ul class="pf-c-menu__list" role="menu">
+                          <li
+                            class="pf-c-menu__list-item pf-m-disabled"
+                            role="none"
+                          >
+                            <button
+                              class="pf-c-menu__item"
+                              type="button"
+                              disabled
+                              role="menuitem"
+                            >
+                              <span class="pf-c-menu__item-description">
+                                <div class="pf-u-font-size-sm">Username:</div>
+                                <div class="pf-u-font-size-md">ned_username</div>
+                              </span>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-menu__list-item pf-m-disabled"
+                            role="none"
+                          >
+                            <button
+                              class="pf-c-menu__item"
+                              type="button"
+                              disabled
+                              role="menuitem"
+                            >
+                              <span class="pf-c-menu__item-description">
+                                <div class="pf-u-font-size-sm">Account number:</div>
+                                <div class="pf-u-font-size-md">123456789</div>
+                              </span>
+                            </button>
+                          </li>
+                          <li class="pf-c-divider" role="separator"></li>
+                          <li class="pf-c-menu__list-item" role="none">
+                            <button
+                              class="pf-c-menu__item"
+                              type="button"
+                              role="menuitem"
+                            >
+                              <span class="pf-c-menu__item-main">
+                                <span class="pf-c-menu__item-text">My profile</span>
+                              </span>
+                            </button>
+                          </li>
+                          <li class="pf-c-menu__list-item" role="none">
+                            <button
+                              class="pf-c-menu__item"
+                              type="button"
+                              role="menuitem"
+                            >
+                              <span class="pf-c-menu__item-main">
+                                <span
+                                  class="pf-c-menu__item-text"
+                                >User management</span>
+                              </span>
+                            </button>
+                          </li>
+                          <li class="pf-c-menu__list-item" role="none">
+                            <button
+                              class="pf-c-menu__item"
+                              type="button"
+                              role="menuitem"
+                            >
+                              <span class="pf-c-menu__item-main">
+                                <span class="pf-c-menu__item-text">Logout</span>
+                              </span>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                      <hr class="pf-c-divider pf-m-hidden-on-sm" />
+                      <section class="pf-c-menu__group">
+                        <ul class="pf-c-menu__list" role="menu">
+                          <li class="pf-c-menu__list-item" role="none">
+                            <button
+                              class="pf-c-menu__item"
+                              type="button"
+                              role="menuitem"
+                              aria-expanded="false"
+                            >
+                              <span class="pf-c-menu__item-main">
+                                <span class="pf-c-menu__item-icon">
+                                  <i
+                                    class="fas fa-fw fa-cog"
+                                    aria-hidden="true"
+                                  ></i>
+                                </span>
+                                <span class="pf-c-menu__item-text">Settings</span>
+                                <span class="pf-c-menu__item-toggle-icon">
+                                  <i class="fas fa-angle-right"></i>
+                                </span>
+                              </span>
+                            </button>
+                            <div class="pf-c-menu" hidden>
+                              <div class="pf-c-menu__content">
+                                <ul class="pf-c-menu__list" role="menu">
+                                  <li
+                                    class="pf-c-menu__list-item pf-m-drill-up"
+                                    role="none"
+                                  >
+                                    <button
+                                      class="pf-c-menu__item"
+                                      type="button"
+                                      role="menuitem"
+                                    >
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-toggle-icon"
+                                        >
+                                          <i class="fas fa-angle-left"></i>
+                                        </span>
+                                        <span class="pf-c-menu__item-icon">
+                                          <i
+                                            class="fas fa-fw fa-cog"
+                                            aria-hidden="true"
+                                          ></i>
+                                        </span>
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >Settings</span>
+                                      </span>
+                                    </button>
+                                  </li>
+                                  <li class="pf-c-divider" role="separator"></li>
+                                  <li class="pf-c-menu__list-item" role="none">
+                                    <a
+                                      class="pf-c-menu__item"
+                                      href="#"
+                                      role="menuitem"
+                                    >
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >Customer support</span>
+                                      </span>
+                                    </a>
+                                  </li>
+                                  <li class="pf-c-menu__list-item" role="none">
+                                    <a
+                                      class="pf-c-menu__item"
+                                      href="#"
+                                      role="menuitem"
+                                    >
+                                      <span class="pf-c-menu__item-main">
+                                        <span class="pf-c-menu__item-text">About</span>
+                                      </span>
+                                    </a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </li>
+
+                          <li class="pf-c-menu__list-item" role="none">
+                            <button
+                              class="pf-c-menu__item"
+                              type="button"
+                              role="menuitem"
+                              aria-expanded="false"
+                            >
+                              <span class="pf-c-menu__item-main">
+                                <span class="pf-c-menu__item-icon">
+                                  <i
+                                    class="fas fa-fw fa-pf-icon pf-icon-help"
+                                    aria-hidden="true"
+                                  ></i>
+                                </span>
+                                <span class="pf-c-menu__item-text">Help</span>
+                                <span class="pf-c-menu__item-toggle-icon">
+                                  <i class="fas fa-angle-right"></i>
+                                </span>
+                              </span>
+                            </button>
+                            <div class="pf-c-menu" hidden>
+                              <div class="pf-c-menu__content">
+                                <ul class="pf-c-menu__list" role="menu">
+                                  <li
+                                    class="pf-c-menu__list-item pf-m-drill-up"
+                                    role="none"
+                                  >
+                                    <button
+                                      class="pf-c-menu__item"
+                                      type="button"
+                                      role="menuitem"
+                                    >
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-toggle-icon"
+                                        >
+                                          <i class="fas fa-angle-left"></i>
+                                        </span>
+                                        <span class="pf-c-menu__item-icon">
+                                          <i
+                                            class="fas fa-fw fa-pf-icon pf-icon-help"
+                                            aria-hidden="true"
+                                          ></i>
+                                        </span>
+                                        <span class="pf-c-menu__item-text">Help</span>
+                                      </span>
+                                    </button>
+                                  </li>
+                                  <li class="pf-c-divider" role="separator"></li>
+                                  <li class="pf-c-menu__list-item" role="none">
+                                    <a
+                                      class="pf-c-menu__item"
+                                      href="#"
+                                      role="menuitem"
+                                    >
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >Support options</span>
+                                      </span>
+                                    </a>
+                                  </li>
+                                  <li class="pf-c-menu__list-item" role="none">
+                                    <a
+                                      class="pf-c-menu__item"
+                                      href="#"
+                                      role="menuitem"
+                                    >
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >Open support case</span>
+                                      </span>
+                                    </a>
+                                  </li>
+                                  <li class="pf-c-menu__list-item" role="none">
+                                    <a
+                                      class="pf-c-menu__item"
+                                      href="#"
+                                      role="menuitem"
+                                    >
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >API documentation</span>
+                                      </span>
+                                    </a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </li>
+
+                          <li class="pf-c-menu__list-item" role="none">
+                            <button
+                              class="pf-c-menu__item"
+                              type="button"
+                              role="menuitem"
+                            >
+                              <span class="pf-c-menu__item-main">
+                                <span class="pf-c-menu__item-icon">
+                                  <i class="fas fa-fw fa-th" aria-hidden="true"></i>
+                                </span>
+                                <span
+                                  class="pf-c-menu__item-text"
+                                >Application launcher</span>
+                                <span class="pf-c-menu__item-toggle-icon">
+                                  <i class="fas fa-angle-right"></i>
+                                </span>
+                              </span>
+                            </button>
+                            <div class="pf-c-menu" hidden>
+                              <div class="pf-c-menu__header">
+                                <button
+                                  class="pf-c-menu__item"
+                                  type="button"
+                                  role="menuitem"
+                                >
+                                  <span class="pf-c-menu__item-main">
+                                    <span class="pf-c-menu__item-toggle-icon">
+                                      <i class="fas fa-angle-left"></i>
+                                    </span>
+                                    <span class="pf-c-menu__item-icon">
+                                      <i
+                                        class="fas fa-fw fa-th"
+                                        aria-hidden="true"
+                                      ></i>
+                                    </span>
+                                    <span
+                                      class="pf-c-menu__item-text"
+                                    >Application launcher</span>
+                                  </span>
+                                </button>
+                              </div>
+                              <div class="pf-c-menu__search">
+                                <div class="pf-c-menu__search-input">
+                                  <div class="pf-c-search-input">
+                                    <div class="pf-c-search-input__bar">
+                                      <span class="pf-c-search-input__text">
+                                        <span class="pf-c-search-input__icon">
+                                          <i
+                                            class="fas fa-search fa-fw"
+                                            aria-hidden="true"
+                                          ></i>
+                                        </span>
+                                        <input
+                                          class="pf-c-search-input__text-input"
+                                          type="text"
+                                          placeholder="Search"
+                                          aria-label="Search"
+                                        />
+                                      </span>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                              <hr class="pf-c-divider" />
+                              <section class="pf-c-menu__group">
+                                <h1 class="pf-c-menu__group-title">Favorites</h1>
+                                <ul class="pf-c-menu__list" role="menu">
+                                  <li class="pf-c-menu__list-item" role="none">
+                                    <a
+                                      class="pf-c-menu__item"
+                                      href="#"
+                                      role="menuitem"
+                                    >
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >Link 1</span>
+                                      </span>
+                                    </a>
+                                    <button
+                                      class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
+                                      type="button"
+                                      aria-label="Starred"
+                                    >
+                                      <span class="pf-c-menu__item-action-icon">
+                                        <i
+                                          class="fas fa-star"
+                                          aria-hidden="true"
+                                        ></i>
+                                      </span>
+                                    </button>
+                                  </li>
+                                  <li class="pf-c-menu__list-item" role="none">
+                                    <a
+                                      class="pf-c-menu__item"
+                                      href="#"
+                                      role="menuitem"
+                                      target="_blank"
+                                    >
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >Link 2</span>
+                                        <span
+                                          class="pf-c-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>
+                                      </span>
+                                    </a>
+                                    <button
+                                      class="pf-c-menu__item-action pf-m-favorite"
+                                      type="button"
+                                      aria-label="Not starred"
+                                    >
+                                      <span class="pf-c-menu__item-action-icon">
+                                        <i
+                                          class="fas fa-star"
+                                          aria-hidden="true"
+                                        ></i>
+                                      </span>
+                                    </button>
+                                  </li>
+                                </ul>
+                              </section>
+                              <hr class="pf-c-divider" />
+                              <section class="pf-c-menu__group">
+                                <h1 class="pf-c-menu__group-title">Group 1</h1>
+                                <ul class="pf-c-menu__list" role="menu">
+                                  <li class="pf-c-menu__list-item" role="none">
+                                    <a
+                                      class="pf-c-menu__item"
+                                      href="#"
+                                      role="menuitem"
+                                    >
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >Link 1</span>
+                                      </span>
+                                    </a>
+                                    <button
+                                      class="pf-c-menu__item-action pf-m-favorite"
+                                      type="button"
+                                      aria-label="Not starred"
+                                    >
+                                      <span class="pf-c-menu__item-action-icon">
+                                        <i
+                                          class="fas fa-star"
+                                          aria-hidden="true"
+                                        ></i>
+                                      </span>
+                                    </button>
+                                  </li>
+                                  <li class="pf-c-menu__list-item" role="none">
+                                    <a
+                                      class="pf-c-menu__item"
+                                      href="#"
+                                      role="menuitem"
+                                      target="_blank"
+                                    >
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >Link 2</span>
+                                        <span
+                                          class="pf-c-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>
+                                      </span>
+                                    </a>
+                                    <button
+                                      class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
+                                      type="button"
+                                      aria-label="Starred"
+                                    >
+                                      <span class="pf-c-menu__item-action-icon">
+                                        <i
+                                          class="fas fa-star"
+                                          aria-hidden="true"
+                                        ></i>
+                                      </span>
+                                    </button>
+                                  </li>
+                                </ul>
+                              </section>
+                            </div>
+                          </li>
+                        </ul>
+                      </section>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
+              <div
+                class="pf-c-dropdown pf-m-full-height"
+                style="--pf-c-dropdown--MaxWidth: 20ch;"
+              >
+                <button
+                  class="pf-c-dropdown__toggle"
+                  id="image-alignment-demo-masthead-profile-button"
+                  aria-expanded="false"
+                  type="button"
+                >
+                  <span class="pf-c-dropdown__toggle-image">
+                    <img
+                      class="pf-c-avatar"
+                      src="/assets/images/img_avatar.svg"
+                      alt="Avatar image"
+                    />
+                  </span>
+                  <span class="pf-c-dropdown__toggle-text">Ned Username</span>
+                  <span class="pf-c-dropdown__toggle-icon">
+                    <i class="fas fa-caret-down" aria-hidden="true"></i>
+                  </span>
+                </button>
+                <div class="pf-c-dropdown__menu" hidden>
+                  <section class="pf-c-dropdown__group">
+                    <div class="pf-c-dropdown__menu-item pf-m-text">
+                      <div class="pf-u-font-size-sm">Account number:</div>
+                      <div>123456789</div>
+                    </div>
+                    <div class="pf-c-dropdown__menu-item pf-m-text">
+                      <div class="pf-u-font-size-sm">Username:</div>
+                      <div>mshaksho@redhat.com</div>
+                    </div>
+                  </section>
+                  <hr class="pf-c-divider" />
+                  <section class="pf-c-dropdown__group">
+                    <ul>
+                      <li>
+                        <a class="pf-c-dropdown__menu-item" href="#">My profile</a>
+                      </li>
+                      <li>
+                        <a
+                          class="pf-c-dropdown__menu-item"
+                          href="#"
+                        >User management</a>
+                      </li>
+                      <li>
+                        <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
+                      </li>
+                    </ul>
+                  </section>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+  <div class="pf-c-page__sidebar">
+    <div class="pf-c-page__sidebar-body">
+      <nav
+        class="pf-c-nav"
+        id="image-alignment-demo-primary-nav"
+        aria-label="Global"
+      >
+        <ul class="pf-c-nav__list">
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">System panel</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a
+              href="#"
+              class="pf-c-nav__link pf-m-current"
+              aria-current="page"
+            >Policy</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Authentication</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Network services</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Server</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+  <main
+    class="pf-c-page__main"
+    tabindex="-1"
+    id="main-content-image-alignment-demo"
+  >
+    <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
+      <div class="pf-c-page__main-body">
+        <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
+          <ol class="pf-c-breadcrumb__list">
+            <li class="pf-c-breadcrumb__item">
+              <a href="#" class="pf-c-breadcrumb__link">Section home</a>
+            </li>
+            <li class="pf-c-breadcrumb__item">
+              <span class="pf-c-breadcrumb__item-divider">
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </span>
+
+              <a href="#" class="pf-c-breadcrumb__link">Section title</a>
+            </li>
+            <li class="pf-c-breadcrumb__item">
+              <span class="pf-c-breadcrumb__item-divider">
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </span>
+
+              <a href="#" class="pf-c-breadcrumb__link">Section title</a>
+            </li>
+            <li class="pf-c-breadcrumb__item">
+              <span class="pf-c-breadcrumb__item-divider">
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </span>
+
+              <a
+                href="#"
+                class="pf-c-breadcrumb__link pf-m-current"
+                aria-current="page"
+              >Section landing</a>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </section>
+    <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
+      <div class="pf-c-page__main-body">
+        <div class="pf-c-content">
+          <h1>Main title</h1>
+          <p>This is a full page demo.</p>
+        </div>
+      </div>
+    </section>
+    <section
+      class="pf-c-page__main-section pf-m-limit-width pf-m-no-padding pf-m-padding-on-xl"
+    >
+      <div class="pf-c-page__main-body">
+        <table
+          class="pf-c-table pf-m-grid-lg"
+          role="grid"
+          aria-label="This is an example of how to control image and text alignment in table cells."
+          id="image-alignment-demo-table"
+        >
+          <thead>
+            <tr role="row">
+              <th
+                class="pf-m-nowrap pf-c-table__sort pf-m-selected"
+                role="columnheader"
+                aria-sort="ascending"
+                scope="col"
+              >
+                <button class="pf-c-table__button">
+                  <div class="pf-c-table__button-content">
+                    <span class="pf-c-table__text">Repositories</span>
+                    <span class="pf-c-table__sort-indicator">
+                      <i class="fas fa-long-arrow-alt-up"></i>
+                    </span>
+                  </div>
+                </button>
+              </th>
+              <th
+                class="pf-m-fit-content pf-c-table__sort pf-m-help"
+                role="columnheader"
+                aria-sort="none"
+                scope="col"
+              >
+                <div class="pf-c-table__column-help">
+                  <button class="pf-c-table__button">
+                    <div class="pf-c-table__button-content">
+                      <span class="pf-c-table__text">Branches</span>
+                      <span class="pf-c-table__sort-indicator">
+                        <i class="fas fa-arrows-alt-v"></i>
+                      </span>
+                    </div>
+                  </button>
+                  <span class="pf-c-table__column-help-action">
+                    <button
+                      class="pf-c-button pf-m-plain"
+                      type="button"
+                      aria-label="More info"
+                    >
+                      <i class="pficon pf-icon-help" aria-hidden="true"></i>
+                    </button>
+                  </span>
+                </div>
+              </th>
+              <th
+                class="pf-m-fit-content pf-c-table__sort"
+                role="columnheader"
+                aria-sort="none"
+                scope="col"
+              >
+                <button class="pf-c-table__button">
+                  <div class="pf-c-table__button-content">
+                    <span class="pf-c-table__text">Pull requests</span>
+                    <span class="pf-c-table__sort-indicator">
+                      <i class="fas fa-arrows-alt-v"></i>
+                    </span>
+                  </div>
+                </button>
+              </th>
+              <th
+                class="pf-m-fit-content"
+                role="columnheader"
+                scope="col"
+              >Workspaces</th>
+              <th
+                class="pf-m-fit-content pf-m-help"
+                role="columnheader"
+                scope="col"
+              >
+                <div class="pf-c-table__column-help">
+                  <span class="pf-c-table__text">Last commit</span>
+                  <span class="pf-c-table__column-help-action">
+                    <button
+                      class="pf-c-button pf-m-plain"
+                      type="button"
+                      aria-label="More info"
+                    >
+                      <i class="pficon pf-icon-help" aria-hidden="true"></i>
+                    </button>
+                  </span>
+                </div>
+              </th>
+            </tr>
+          </thead>
+
+          <tbody role="rowgroup">
+            <tr role="row">
+              <td role="cell" data-label="Repository name">
+                <div class="pf-l-flex pf-m-nowrap">
+                  <div class="pf-l-flex pf-m-align-self-flex-start pf-u-mt-sm">
+                    <div class="table-demo-icon">
+                      <svg
+                        id="Layer_1"
+                        data-name="Layer 1"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 192 145"
+                      >
+                        <defs>
+                          <style>
+  .cls-1 {
+    fill: #e00;
+  }
+                          </style>
+                        </defs>
+                        <title>RedHat-Logo-Hat-Color</title>
+                        <path
+                          d="M157.77,62.61a14,14,0,0,1,.31,3.42c0,14.88-18.1,17.46-30.61,17.46C78.83,83.49,42.53,53.26,42.53,44a6.43,6.43,0,0,1,.22-1.94l-3.66,9.06a18.45,18.45,0,0,0-1.51,7.33c0,18.11,41,45.48,87.74,45.48,20.69,0,36.43-7.76,36.43-21.77,0-1.08,0-1.94-1.73-10.13Z"
+                        />
+                        <path
+                          class="cls-1"
+                          d="M127.47,83.49c12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89,8.69,103.76.5,97.51.5,91.69.5,90,8,83.06,8c-6.68,0-11.64-5.6-17.89-5.6-6,0-9.91,4.09-12.93,12.5,0,0-8.41,23.72-9.49,27.16A6.43,6.43,0,0,0,42.53,44c0,9.22,36.3,39.45,84.94,39.45M160,72.07c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C78.54,104,37.58,76.6,37.58,58.49a18.45,18.45,0,0,1,1.51-7.33C22.27,52,.5,55,.5,74.22c0,31.48,74.59,70.28,133.65,70.28,45.28,0,56.7-20.48,56.7-36.65,0-12.72-11-27.16-30.83-35.78"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div class="pf-l-flex pf-m-column pf-m-space-items-none">
+                    <h1 class="pf-c-title pf-m-xl">Repository 1</h1>
+                    <span
+                      class="pf-u-font-size-sm"
+                    >2.6.6 provided by Red Hat Inc</span>
+                  </div>
+                </div>
+              </td>
+              <td role="cell" data-label="Branches">10</td>
+              <td role="cell" data-label="Pull requests">25</td>
+              <td role="cell" data-label="Workspaces">5</td>
+              <td role="cell" data-label="Last commit">2 days ago</td>
+            </tr>
+
+            <tr role="row">
+              <td role="cell" data-label="Repository name">
+                <div class="pf-l-flex pf-m-nowrap">
+                  <div class="pf-l-flex pf-m-align-self-flex-start pf-u-mt-sm">
+                    <div class="table-demo-icon">
+                      <svg
+                        role="img"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="currentColor"
+                      >
+                        <title>GitHub logo</title>
+                        <path
+                          d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div class="pf-l-flex pf-m-column pf-m-space-items-none">
+                    <h1 class="pf-c-title pf-m-xl">Repository 2</h1>
+                    <span class="pf-u-font-size-sm">2.6.6 provided by Github</span>
+                  </div>
+                </div>
+              </td>
+              <td role="cell" data-label="Branches">10</td>
+              <td role="cell" data-label="Pull requests">25</td>
+              <td role="cell" data-label="Workspaces">5</td>
+              <td role="cell" data-label="Last commit">2 days ago</td>
+            </tr>
+
+            <tr role="row">
+              <td role="cell" data-label="Repository name">
+                <div class="pf-l-flex pf-m-nowrap">
+                  <div class="pf-l-flex pf-m-align-self-flex-start pf-u-mt-sm">
+                    <div class="table-demo-icon">
+                      <svg
+                        role="img"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="#4285F4"
+                      >
+                        <title>Google logo</title>
+                        <path
+                          d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div class="pf-l-flex pf-m-column pf-m-space-items-none">
+                    <h1 class="pf-c-title pf-m-xl">Repository 3</h1>
+                    <span class="pf-u-font-size-sm">1.2.3 provided by Google</span>
+                  </div>
+                </div>
+              </td>
+              <td role="cell" data-label="Branches">10</td>
+              <td role="cell" data-label="Pull requests">25</td>
+              <td role="cell" data-label="Workspaces">5</td>
+              <td role="cell" data-label="Last commit">2 days ago</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </main>
+</div>
+
+```