PF Next

Login

Preview

This Preview can only be accessed in full page mode.
<div class="pf-c-background-image">
</div>
<div class="pf-c-login">
  <div class="pf-c-login__container">
    <header class="pf-c-login__header">
      <img class="pf-c-brand" src="/assets/images/pf_logo_color.svg" alt="PatternFly Logo">
      <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>
    </header>
    <main class="pf-c-login__main">
      <header class="pf-c-login__main-header">
        <h1 class="pf-c-title pf-m-3xl">
          Log in to your account
        </h1>
        <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">
            <span class="pf-c-dropdown__toggle-text">
                          English
              </span>
            <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>Need an account?
          <a href="https://www.patternfly.org/">Sign up.</a>
        </p>
      </header>
      <div class="pf-c-login__main-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">
            <button class="pf-c-button pf-m-primary" type="submit">
              Log in
            </button>
            <div class="pf-c-check">
              <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>
        </form>
      </div>
      <footer class="pf-c-login__main-footer">
        <h2 class="pf-c-title pf-m-md">
          Or log in with
        </h2>
        <ul class="pf-c-list pf-m-grid">
          <li>
            <a href="#" class="pf-c-login__main-footer-link">
              <img src="/assets/images/logo-google.svg" alt="">
              <span class="pf-c-login__main-footer-link-text">
                              Google
            </span>
            </a>
          </li>
          <li>
            <a href="#" class="pf-c-login__main-footer-link">
              <img src="/assets/images/logo-github.svg" alt="">
              <span class="pf-c-login__main-footer-link-text">
                              GitHub
            </span>
            </a>
          </li>
          <li>
            <a href="#" class="pf-c-login__main-footer-link">
              <img src="/assets/images/logo-dropbox.svg" alt="">
              <span class="pf-c-login__main-footer-link-text">
                              Dropbox
            </span>
            </a>
          </li>
          <li>
            <a href="#" class="pf-c-login__main-footer-link">
              <img src="/assets/images/logo-facebook.svg" alt="">
              <span class="pf-c-login__main-footer-link-text">
                              Facebook
            </span>
            </a>
          </li>
          <li>
            <a href="#" class="pf-c-login__main-footer-link">
              <img src="/assets/images/logo-gitlab.svg" alt="">
              <span class="pf-c-login__main-footer-link-text">
                              GitLab
            </span>
            </a>
          </li>
          <li>
            <button class="pf-c-button pf-m-link" id="login-more">
              More...
            </button>
          </li>
        </ul>
      </footer>
    </main>
    <footer class="pf-c-login__footer">
      <ul class="pf-c-list pf-m-inline">
        <li>
          <a href="#" class="pf-c-login__footer-link">
            Terms of Use
          </a>
        </li>
        <li>
          <a href="#" class="pf-c-login__footer-link">
            Help
          </a>
        </li>
        <li>
          <a href="#" class="pf-c-login__footer-link">
            Privacy Policy
          </a>
        </li>
      </ul>
    </footer>
  </div>
</div>

Documentation

Usage

Class Applied To Outcome
.pf-c-login <div> Initializes the login component.
.pf-c-login__container <div> Positions the login component content.
.pf-c-login__header <header> Positions the login header.
.pf-c-login__header .pf-c-brand <img> Creates a brand image inside of login header.
.pf-c-login__main <main> Positions the login main area.
.pf-c-login__main-header <header> Creates the header of the main area.
.pf-c-login__main-header .pf-c-title <h1>,<h2>,<h3>,<h4>,<h5>,<h6> Creates a title in the main header area.
.pf-c-login__main-header .pf-c-dropdown <div> Creates a language selector dropdown in the main header area.
.pf-c-login__main-body <div> Creates the body of the main area.
.pf-c-login__main-body .pf-c-form <form> Creates the login form in the main body area.
.pf-c-login__main-footer <footer> Creates the footer of the main area.
.pf-c-login__main-footer .pf-c-title <h1>,<h2>,<h3>,<h4>,<h5>,<h6> Creates a title in the main footer area.
.pf-c-login__main-footer .pf-c-list <ul> Creates a list of links in the main footer area.
.pf-c-login__main-footer-link <a> Creates links in the main footer area.
.pf-c-login__main-footer-link-text <span> Creates text in the in the main footer links.
.pf-c-login__footer <footer> Positions the login footer.
.pf-c-login__footer .pf-c-list <ul> Creates a list of links in the login footer.
.pf-c-login__footer-link <a> Creates links in the login footer.