PF Next

Login Page Demo

Loginpage Simple

Preview

This Preview can only be accessed in full page mode.
<div class="pf-c-background-image">
</div>
<div class="pf-l-login">
  <div class="pf-l-login__container">
    <header class="pf-l-login__header">
      <div class="pf-l-login__header-brand">
        <img class="pf-c-brand" src="/assets/images/pf_logo_color.svg" alt="PatternFly Logo">
      </div>
      <div class="pf-c-content">
        <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
      </div>
    </header>
    <main class="pf-l-login__main">
      <div class="pf-c-login-box">
        <div class="pf-c-login-box__header">
          <h1 class="pf-c-title pf-m-3xl pf-u-mb-sm">
            Log in to your account
          </h1>
          <div class="pf-u-display-inline-flex pf-u-align-items-center">
            <div class="pf-c-dropdown">
              <span id="dropdown-select-label" hidden>Select a fruit</span>
              <button id="dropdown-select-button" class="pf-c-dropdown__toggle" aria-labelledby="dropdown-select-label dropdown-select-button" aria-expanded="false">
                English
                <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
              </button>
              <ul class="pf-c-dropdown__menu" aria-labelledby="dropdown-select-label" hidden>
                <li>
                  <button class="pf-c-dropdown__menu-item" aria-pressed="true">Apples</button>
                </li>
                <li>
                  <button class="pf-c-dropdown__menu-item" aria-pressed="false">Oranges</button>
                </li>
                <li>
                  <button class="pf-c-dropdown__menu-item" aria-pressed="false" disabled>Bananas</button>
                </li>
                <li class="pf-c-dropdown__separator" role="separator"></li>
                <li>
                  <button class="pf-c-dropdown__menu-item" aria-pressed="false">Carrots</button>
                </li>
              </ul>
            </div>
            <p class="pf-u-ml-md">Need an account?
              <a href="https://www.patternfly.org/">Sign up.</a>
            </p>
          </div>
        </div>
        <div class="pf-c-login-box__body">
          <form class="pf-c-form">
            <div class="pf-c-form__group">
              <label class="pf-c-form__label" required for="login-demo-form-username">
                Username <span class="pf-c-form__label__required" aria-hidden="true">&#42;</span>
              </label>
              <input class="pf-c-form-control" required input="true" type="text" id="login-demo-form-username" name="login-demo-form-username"></input>
            </div>
            <div class="pf-c-form__group">
              <label class="pf-c-form__label" required for="login-demo-form-password">
                Password <span class="pf-c-form__label__required" aria-hidden="true">&#42;</span>
              </label>
              <input class="pf-c-form-control" required input="true" type="password" id="login-demo-form-password" name="login-demo-form-password"></input>
            </div>
            <div class="pf-c-form__group pf-m-action pf-u-align-items-center pf-u-display-flex pf-u-flex-direction-column pf-u-flex-direction-row-on-md">
              <button class="pf-c-button pf-c-button pf-m-primary pf-u-mr-lg-on-md pf-u-px-xl pf-u-align-self-stretch pf-u-align-self-flex-start-on-md">
                Log in
              </button>
              <div class="pf-u-text-align-center pf-u-text-align-left-on-md">
                <div class="pf-c-check pf-u-m-md pf-u-align-items-center pf-u-display-flex">
                  <input class="pf-c-check__input" type="checkbox" id="login-demo-checkbox" name="login-demo-checkbox">
                  <label class="pf-c-check__label" for="login-demo-checkbox">
                    Keep me logged in for 30 days.</label>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="pf-c-login-box__footer">
          <h2 class="pf-c-title pf-m-md pf-u-mb-md pf-u-text-align-center pf-u-text-align-left-on-md">
            Or log in with
          </h2>
          <ul class="pf-c-list pf-m-grid">
            <li>
              <a class="pf-u-display-flex pf-u-align-items-center pf-u-pt-sm pf-u-pb-sm">
                <img src="/assets/images/logo-google.svg" alt="" />
                <p class="pf-u-display-block-on-sm pf-u-ml-sm pf-u-display-none">
                  Google
                </p>
              </a>
            </li>
            <li>
              <a class="pf-u-display-flex pf-u-align-items-center pf-u-pt-sm pf-u-pb-sm">
                <img src="/assets/images/logo-github.svg" alt="" />
                <p class="pf-u-display-block-on-sm pf-u-ml-sm pf-u-display-none">
                  GitHub
                </p>
              </a>
            </li>
            <li>
              <a class="pf-u-display-flex pf-u-align-items-center pf-u-pt-sm pf-u-pb-sm">
                <img src="/assets/images/logo-dropbox.svg" alt="" />
                <p class="pf-u-display-block-on-sm pf-u-ml-sm pf-u-display-none">
                  Dropbox
                </p>
              </a>
            </li>
            <li>
              <a class="pf-u-display-flex pf-u-align-items-center pf-u-pt-sm pf-u-pb-sm">
                <img src="/assets/images/logo-facebook.svg" alt="" />
                <p class="pf-u-display-block-on-sm pf-u-ml-sm pf-u-display-none">
                  Facebook
                </p>
              </a>
            </li>
            <li>
              <a class="pf-u-display-flex pf-u-align-items-center pf-u-pt-sm pf-u-pb-sm">
                <img class="" src="/assets/images/logo-gitlab.svg" alt="" />
                <p class="pf-u-display-block-on-sm pf-u-ml-sm pf-u-display-none">
                  GitLab
                </p>
              </a>
            </li>
            <li>
              <button class="pf-u-display- pf-c-button pf-m-link pf-u-align-items-center pf-u-pt-sm pf-u-pb-sm" id="login-more">
                More...
              </button>
            </li>
          </ul>
        </div>
      </div>
    </main>
    <footer class="pf-l-login__footer">
      <ul class="pf-c-list pf-m-inline">
        <li>
          <a href="#">Terms of Use</a>
        </li>
        <li>
          <a href="#">Help</a>
        </li>
        <li>
          <a href="#">Privacy Policy</a>
        </li>
      </ul>
    </footer>
  </div>
</div>

Documentation

Login Demo