PF Next

Page Layout Demo

Page Layout Default Nav Tall Header Example

Preview

This Preview can only be accessed in full page mode.
<div class="pf-c-background-image">
</div>
<div class="pf-l-page" id="page-layout-default-nav">
  <header role="banner" class="pf-l-page__header pf-m-tall">
    <div class="pf-l-page__header-brand">
      <div class="pf-l-page__header-brand-toggle">
        <button class="pf-c-button pf-m-plain" id="nav-toggle" aria-label="Toggle primary navigation">
          <i class="fas fa-bars" aria-hidden="true"></i>
        </button>
      </div>
      <a class="pf-l-page__header-brand-link">
        <img class="pf-c-brand pf-m-sm" src="/assets/images/l_pf-reverse-164x11.png" alt="Patternfly Logo">
      </a>
    </div>
    <div class="pf-l-page__header-tools">
      <div class="pf-l-toolbar">
        <div class="pf-l-toolbar__group pf-u-sr-only pf-u-visible-on-lg">
          <div class="pf-l-toolbar__item">
            <button class="pf-c-button pf-m-plain" aria-label="Overflow actions">
              <i class="fas fa-bell" aria-hidden="true"></i>
            </button>
          </div>
          <div class="pf-l-toolbar__item">
            <button class="pf-c-button pf-m-plain" aria-label="Overflow actions">
              <i class="fas fa-cog" aria-hidden="true"></i>
            </button>
          </div>
        </div>
        <div class="pf-l-toolbar__group">
          <div class="pf-l-toolbar__item pf-u-hidden-on-lg pf-u-mr-0">
            <button class="pf-c-button pf-m-plain" aria-label="Overflow actions">
              <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
            </button>
          </div>
          <div class="pf-l-toolbar__item pf-u-sr-only pf-u-visible-on-md">
            <div class="pf-c-dropdown pf-m-plain">
              <button id="dropdown-example-collapsed-button" class="pf-c-dropdown__toggle" aria-expanded="false">
                Kyle Baker
                <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
              </button>
              <div class="pf-c-dropdown__menu" hidden>
                Kyle Baker
              </div>
            </div>
          </div>
        </div>
      </div>
      <img class="pf-c-avatar" src="/assets/images/img_avatar.svg" alt="Avatar Image">
    </div>
  </header>
  <aside class="pf-l-page__sidebar">
    <nav class="pf-c-nav" id="primary-nav" aria-label="Primary Nav Default Example">
      <ul class="pf-c-nav__list">
        <li class="pf-c-nav__item">
          <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">
            System Panel
          </a>
        </li>
        <li class="pf-c-nav__item">
          <a href="#" class="pf-c-nav__link">
            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>
  </aside>
  <main role="main" class="pf-l-page__main">
    <section class="pf-l-page__main-section pf-m-light">
      <div class="pf-c-content">
        <h1>Main Title</h1>
        <p>
          Body text should be Overpass Regular at 16px. It should have leading of 24px because
          <br> of it’s relative line height of 1.5.
        </p>
      </div>
    </section>
    <section class="pf-l-page__main-section">
      <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>
          </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>
    </section>
  </main>
</div>

Page Layout Expandable Nav Example

Preview

This Preview can only be accessed in full page mode.
<div class="pf-c-background-image">
</div>
<div class="pf-l-page" id="page-layout-expandable-nav">
  <header role="banner" class="pf-l-page__header">
    <div class="pf-l-page__header-brand">
      <div class="pf-l-page__header-brand-toggle">
        <button class="pf-c-button pf-m-plain" id="nav-toggle" aria-label="Toggle primary navigation">
          <i class="fas fa-bars" aria-hidden="true"></i>
        </button>
      </div>
      <a class="pf-l-page__header-brand-link">
        <img class="pf-c-brand pf-m-sm" src="/assets/images/l_pf-reverse-164x11.png" alt="Patternfly Logo">
      </a>
    </div>
    <div class="pf-l-page__header-tools">
      <div class="pf-l-toolbar">
        <div class="pf-l-toolbar__group pf-u-sr-only pf-u-visible-on-lg">
          <div class="pf-l-toolbar__item">
            <button class="pf-c-button pf-m-plain" aria-label="Overflow actions">
              <i class="fas fa-bell" aria-hidden="true"></i>
            </button>
          </div>
          <div class="pf-l-toolbar__item">
            <button class="pf-c-button pf-m-plain" aria-label="Overflow actions">
              <i class="fas fa-cog" aria-hidden="true"></i>
            </button>
          </div>
        </div>
        <div class="pf-l-toolbar__group">
          <div class="pf-l-toolbar__item pf-u-hidden-on-lg pf-u-mr-0">
            <button class="pf-c-button pf-m-plain" aria-label="Overflow actions">
              <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
            </button>
          </div>
          <div class="pf-l-toolbar__item pf-u-sr-only pf-u-visible-on-md">
            <div class="pf-c-dropdown pf-m-plain">
              <button id="dropdown-example-collapsed-button" class="pf-c-dropdown__toggle" aria-expanded="false">
                Kyle Baker
                <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
              </button>
              <div class="pf-c-dropdown__menu" hidden>
                Kyle Baker
              </div>
            </div>
          </div>
        </div>
      </div>
      <img class="pf-c-avatar" src="/assets/images/img_avatar.svg" alt="Avatar Image">
    </div>
  </header>
  <aside class="pf-l-page__sidebar">
    <nav class="pf-c-nav" id="primary-nav" aria-label="Primary Nav Expandable Example">
      <ul class="pf-c-nav__list">
        <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
          <a href="#" class="pf-c-nav__link" id="link1" aria-expanded="true">
            System Panel
            <span class="pf-c-nav__toggle">
                <i class="fas fa-angle-right" aria-hidden="true"></i>
              </span>
          </a>
          <section class="pf-c-nav__subnav" aria-labelledby="link1">
            <ul class="pf-c-nav__simple-list">
              <li class="pf-c-nav__item">
                <a href="#" class="pf-c-nav__link">
                  Overview
                </a>
              </li>
              <li class="pf-c-nav__item">
                <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">
                  Resource Usage
                </a>
              </li>
              <li class="pf-c-nav__item">
                <a href="#" class="pf-c-nav__link">
                  Hypervisors
                </a>
              </li>
              <li class="pf-c-nav__item">
                <a href="#" class="pf-c-nav__link">
                  Instances
                </a>
              </li>
              <li class="pf-c-nav__item">
                <a href="#" class="pf-c-nav__link">
                  Volumes
                </a>
              </li>
              <li class="pf-c-nav__item">
                <a href="#" class="pf-c-nav__link">
                  Networks
                </a>
              </li>
            </ul>
          </section>
        </li>
        <li class="pf-c-nav__item pf-m-expandable">
          <a href="#" class="pf-c-nav__link" id="link2" aria-expanded="false">
            Policy
            <span class="pf-c-nav__toggle">
                <i class="fas fa-angle-right" aria-hidden="true"></i>
              </span>
          </a>
          <section class="pf-c-nav__subnav" aria-labelledby="link2" hidden>
            <ul class="pf-c-nav__simple-list">
              <li class="pf-c-nav__item">
                <a href="#" class="pf-c-nav__link">
                  Subnav link 1
                </a>
              </li>
              <li class="pf-c-nav__item">
                <a href="#" class="pf-c-nav__link">
                  Subnav link 2
                </a>
              </li>
            </ul>
          </section>
        </li>
        <li class="pf-c-nav__item pf-m-expandable">
          <a href="#" class="pf-c-nav__link" id="link3" aria-expanded="false">
            Authentication
            <span class="pf-c-nav__toggle">
                <i class="fas fa-angle-right" aria-hidden="true"></i>
              </span>
          </a>
          <section class="pf-c-nav__subnav" aria-labelledby="link3" hidden>
            <ul class="pf-c-nav__simple-list">
              <li class="pf-c-nav__item">
                <a href="#" class="pf-c-nav__link">
                  Subnav link 1
                </a>
              </li>
              <li class="pf-c-nav__item">
                <a href="#" class="pf-c-nav__link">
                  Subnav link 2
                </a>
              </li>
            </ul>
          </section>
        </li>
      </ul>
    </nav>
  </aside>
  <main role="main" class="pf-l-page__main">
    <section class="pf-l-page__main-nav">
      <nav class="pf-c-nav" aria-label="Tertiary Example">
        <ul class="pf-c-nav__tertiary-list">
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">
              Nav Item 1
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Nav Item 2
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Nav Item 3
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Nav Item 4
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Nav Item 5
            </a>
          </li>
        </ul>
      </nav>
    </section>
    <section class="pf-l-page__main-section pf-m-light">
      <div class="pf-c-content">
        <h1>Main Title</h1>
        <p>
          Body text should be Overpass Regular at 16px. It should have leading of 24px because
          <br> of it’s relative line height of 1.5.
        </p>
      </div>
    </section>
    <section class="pf-l-page__main-section">
      <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>
          </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>
    </section>
  </main>
</div>

Page Layout Horizontal Nav Example

Preview

This Preview can only be accessed in full page mode.
<div class="pf-c-background-image">
</div>
<div class="pf-l-page" id="page-layout-horizontal-nav">
  <header role="banner" class="pf-l-page__header">
    <div class="pf-l-page__header-brand pf-u-sr-only pf-u-visible-on-md">
      <a class="pf-l-page__header-brand-link">
        <img class="pf-c-brand pf-m-sm" src="/assets/images/l_pf-reverse-164x11.png" alt="Patternfly Logo">
      </a>
    </div>
    <div class="pf-l-page__header-nav">
      <nav class="pf-c-nav" id="nav-primary" aria-label="Primary Nav Default Example">
        <ul class="pf-c-nav__horizontal-list">
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">
              Nav Item 1
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Nav Item 2
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Link 3
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Link 4
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Link 5
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="pf-l-page__header-tools">
      <div class="pf-l-toolbar">
        <div class="pf-l-toolbar__group pf-u-sr-only pf-u-visible-on-lg">
          <div class="pf-l-toolbar__item">
            <button class="pf-c-button pf-m-plain" aria-label="Overflow actions">
              <i class="fas fa-bell" aria-hidden="true"></i>
            </button>
          </div>
          <div class="pf-l-toolbar__item">
            <button class="pf-c-button pf-m-plain" aria-label="Overflow actions">
              <i class="fas fa-cog" aria-hidden="true"></i>
            </button>
          </div>
        </div>
        <div class="pf-l-toolbar__group">
          <div class="pf-l-toolbar__item pf-u-hidden-on-lg pf-u-mr-0">
            <button class="pf-c-button pf-m-plain" aria-label="Overflow actions">
              <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
            </button>
          </div>
          <div class="pf-l-toolbar__item pf-u-sr-only pf-u-visible-on-md">
            <div class="pf-c-dropdown pf-m-plain">
              <button id="dropdown-example-collapsed-button" class="pf-c-dropdown__toggle" aria-expanded="false">
                Kyle Baker
                <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
              </button>
              <div class="pf-c-dropdown__menu" hidden>
                Kyle Baker
              </div>
            </div>
          </div>
        </div>
      </div>
      <img class="pf-c-avatar" src="/assets/images/img_avatar.svg" alt="Avatar Image">
    </div>
  </header>
  <main role="main" class="pf-l-page__main">
    <section class="pf-l-page__main-section pf-m-light">
      <div class="pf-c-content">
        <h1>Main Title</h1>
        <p>
          Body text should be Overpass Regular at 16px. It should have leading of 24px because
          <br> of it’s relative line height of 1.5.
        </p>
      </div>
    </section>
    <section class="pf-l-page__main-section">
      <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>
          </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>
    </section>
  </main>
</div>

Page Layout Simple Nav Example

Preview

This Preview can only be accessed in full page mode.
<div class="pf-c-background-image">
</div>
<div class="pf-l-page" id="page-layout-simple-nav">
  <header role="banner" class="pf-l-page__header">
    <div class="pf-l-page__header-brand">
      <div class="pf-l-page__header-brand-toggle">
        <button class="pf-c-button pf-m-plain" id="nav-toggle" aria-label="Toggle primary navigation">
          <i class="fas fa-bars" aria-hidden="true"></i>
        </button>
      </div>
      <a class="pf-l-page__header-brand-link">
        <img class="pf-c-brand pf-m-sm" src="/assets/images/l_pf-reverse-164x11.png" alt="Patternfly Logo">
      </a>
    </div>
    <div class="pf-l-page__header-tools">
      <div class="pf-l-toolbar">
        <div class="pf-l-toolbar__group pf-u-sr-only pf-u-visible-on-lg">
          <div class="pf-l-toolbar__item">
            <button class="pf-c-button pf-m-plain" aria-label="Overflow actions">
              <i class="fas fa-bell" aria-hidden="true"></i>
            </button>
          </div>
          <div class="pf-l-toolbar__item">
            <button class="pf-c-button pf-m-plain" aria-label="Overflow actions">
              <i class="fas fa-cog" aria-hidden="true"></i>
            </button>
          </div>
        </div>
        <div class="pf-l-toolbar__group">
          <div class="pf-l-toolbar__item pf-u-hidden-on-lg pf-u-mr-0">
            <button class="pf-c-button pf-m-plain" aria-label="Overflow actions">
              <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
            </button>
          </div>
          <div class="pf-l-toolbar__item pf-u-sr-only pf-u-visible-on-md">
            <div class="pf-c-dropdown pf-m-plain">
              <button id="dropdown-example-collapsed-button" class="pf-c-dropdown__toggle" aria-expanded="false">
                Kyle Baker
                <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
              </button>
              <div class="pf-c-dropdown__menu" hidden>
                Kyle Baker
              </div>
            </div>
          </div>
        </div>
      </div>
      <img class="pf-c-avatar" src="/assets/images/img_avatar.svg" alt="Avatar Image">
    </div>
  </header>
  <aside class="pf-l-page__sidebar">
    <nav class="pf-c-nav" id="primary-nav" aria-label="Primary Nav, Simple List Example">
      <ul class="pf-c-nav__simple-list">
        <li class="pf-c-nav__item">
          <a href="#" class="pf-c-nav__link">
            Overview
          </a>
        </li>
        <li class="pf-c-nav__item">
          <a href="#" class="pf-c-nav__link">
            Resource Usage
          </a>
        </li>
        <li class="pf-c-nav__item">
          <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">
            Hypervisors
          </a>
        </li>
        <li class="pf-c-nav__item">
          <a href="#" class="pf-c-nav__link">
            Instances
          </a>
        </li>
        <li class="pf-c-nav__item">
          <a href="#" class="pf-c-nav__link">
            Volumes
          </a>
        </li>
        <li class="pf-c-nav__item">
          <a href="#" class="pf-c-nav__link">
            Networks
          </a>
        </li>
      </ul>
    </nav>
  </aside>
  <main role="main" class="pf-l-page__main">
    <section class="pf-l-page__main-section pf-m-light">
      <div class="pf-c-content">
        <h1>Main Title</h1>
        <p>
          Body text should be Overpass Regular at 16px. It should have leading of 24px because
          <br> of it’s relative line height of 1.5.
        </p>
      </div>
    </section>
    <section class="pf-l-page__main-section">
      <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>
          </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>
    </section>
  </main>
</div>

Page Layout Grouped Nav Example

Preview

This Preview can only be accessed in full page mode.
<div class="pf-c-background-image">
</div>
<div class="pf-l-page" id="page-layout-grouped-nav">
  <header role="banner" class="pf-l-page__header">
    <div class="pf-l-page__header-brand">
      <div class="pf-l-page__header-brand-toggle">
        <button class="pf-c-button pf-m-plain" id="nav-toggle" aria-label="Toggle primary navigation">
          <i class="fas fa-bars" aria-hidden="true"></i>
        </button>
      </div>
      <a class="pf-l-page__header-brand-link">
        <img class="pf-c-brand pf-m-sm" src="/assets/images/l_pf-reverse-164x11.png" alt="Patternfly Logo">
      </a>
    </div>
    <div class="pf-l-page__header-tools">
      <div class="pf-l-toolbar">
        <div class="pf-l-toolbar__group pf-u-sr-only pf-u-visible-on-lg">
          <div class="pf-l-toolbar__item">
            <button class="pf-c-button pf-m-plain" aria-label="Overflow actions">
              <i class="fas fa-bell" aria-hidden="true"></i>
            </button>
          </div>
          <div class="pf-l-toolbar__item">
            <button class="pf-c-button pf-m-plain" aria-label="Overflow actions">
              <i class="fas fa-cog" aria-hidden="true"></i>
            </button>
          </div>
        </div>
        <div class="pf-l-toolbar__group">
          <div class="pf-l-toolbar__item pf-u-hidden-on-lg pf-u-mr-0">
            <button class="pf-c-button pf-m-plain" aria-label="Overflow actions">
              <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
            </button>
          </div>
          <div class="pf-l-toolbar__item pf-u-sr-only pf-u-visible-on-md">
            <div class="pf-c-dropdown pf-m-plain">
              <button id="dropdown-example-collapsed-button" class="pf-c-dropdown__toggle" aria-expanded="false">
                Kyle Baker
                <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
              </button>
              <div class="pf-c-dropdown__menu" hidden>
                Kyle Baker
              </div>
            </div>
          </div>
        </div>
      </div>
      <img class="pf-c-avatar" src="/assets/images/img_avatar.svg" alt="Avatar Image">
    </div>
  </header>
  <aside class="pf-l-page__sidebar">
    <nav class="pf-c-nav" id="primary-nav" aria-label="Primary Nav, Simple List Example">
      <section class="pf-c-nav__section" aria-labelledby="grouped-title1">
        <h2 class="pf-c-nav__section-title" id="grouped-title1">
          System Panel
        </h2>
        <ul class="pf-c-nav__simple-list">
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Overview
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Resource Usage
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">
              Hypervisors
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Instances
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Volumes
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Networks
            </a>
          </li>
        </ul>
      </section>
      <section class="pf-c-nav__section" aria-labelledby="grouped-title2">
        <h2 class="pf-c-nav__section-title" id="grouped-title2">
          Policy
        </h2>
        <ul class="pf-c-nav__simple-list">
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Hosts
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Virtual Machines
            </a>
          </li>
          <li class="pf-c-nav__item">
            <a href="#" class="pf-c-nav__link">
              Storage
            </a>
          </li>
        </ul>
      </section>
    </nav>
  </aside>
  <main role="main" class="pf-l-page__main">
    <section class="pf-l-page__main-section pf-m-light">
      <div class="pf-c-content">
        <h1>Main Title</h1>
        <p>
          Body text should be Overpass Regular at 16px. It should have leading of 24px because
          <br> of it’s relative line height of 1.5.
        </p>
      </div>
    </section>
    <section class="pf-l-page__main-section pf-m-light">
      Light content
    </section>
    <section class="pf-l-page__main-section pf-m-dark-200">
      Dark content
    </section>
    <section class="pf-l-page__main-section">
      Content
    </section>
  </main>
</div>

Documentation

Overview

This demo implements all navigational layout, including page layouts.