PF Next

Login Migration

PatternFly 3 Login

Preview

<div class="login-pf pf-t-dark">
  <div class="login-pf-page">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
          <header class="login-pf-page-header">
            <img class="login-pf-brand" src="/assets/images/pf_logo_color.svg" style="max-width: 360px; width: 70%; margin-top: 22px;" 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 for users.
            </p>
          </header>
          <div class="row">
            <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
              <div class="card-pf">
                <header class="login-pf-header">
                  <div class="btn-group bootstrap-select">
                    <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" title="English"><span class="filter-option pull-left">English</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                    </button>
                    <div class="dropdown-menu open" role="combobox">
                      <ul class="dropdown-menu inner" role="listbox" aria-expanded="false">
                        <li data-original-index="0" class="selected">
                          <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true"><span class="text">English</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                        </li>
                        <li data-original-index="1">
                          <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">French</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                        </li>
                        <li data-original-index="2">
                          <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Italian</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
                        </li>
                      </ul>
                    </div>
                    <select class="selectpicker" tabindex="-98">
                      <option>English</option>
                      <option>French</option>
                      <option>Italian</option>
                    </select>
                  </div>
                  <h1>Single Sign-On</h1>
                  <p class="text-center">Log in to <strong>Application</strong></p>
                </header>
                <form>
                  <div class="form-group">
                    <label class="sr-only" for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control input-lg" id="exampleInputEmail1" placeholder="Email address">
                  </div>
                  <div class="form-group">
                    <label class="sr-only" for="exampleInputPassword1">Password
                    </label>
                    <input type="password" class="form-control input-lg" id="exampleInputPassword1" placeholder="Password">
                  </div>
                  <div class="form-group login-pf-settings">
                    <label class="checkbox-label">
                      <input type="checkbox"> Keep me logged in for 30 days
                    </label>
                    <a href="#">Forgot password?</a>
                  </div>
                  <button type="submit" class="btn btn-primary btn-block btn-lg">Log In</button>
                </form>
                <p class="login-pf-signup">Need an account?
                  <a href="#">Sign up</a>
                </p>
              </div>

              <!-- card -->
              <footer class="login-pf-page-footer">
                <ul class="login-pf-page-footer-links list-unstyled">
                  <li>
                    <a class="login-pf-page-footer-link" href="#">Terms of Use</a>
                  </li>
                  <li>
                    <a class="login-pf-page-footer-link" href="#">Help</a>
                  </li>
                  <li>
                    <a class="login-pf-page-footer-link" href="#">Privacy Policy</a>
                  </li>
                </ul>
              </footer>
            </div>

            <!-- col -->
          </div>

          <!-- row -->
        </div>

        <!-- col -->
      </div>

      <!-- login-pf-page -->
    </div>

    <!--row-->
  </div>

  <!--container-->
</div>

PatternFly 4 Login

Preview

<div class="pf-t-dark pf-m-opaque-200">
  <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">
            <button id="dropdown-select-button" class="pf-c-dropdown__toggle" aria-expanded="false">
              English
              <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
            </button>
            <div class="pf-c-dropdown__menu" hidden>
              English
            </div>
          </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-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>
      </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>
</div>

Documentation

Overview

When converting PatternFly 3 components to PatternFly 4 components, you must also take into consideration the layouts and sizings that PatternFly 3 utilized from Bootstrap 3.

Usage

PF3 Class Applied To PF4 Class Applied To Outcome
.login-pf <body> .pf-c-login <div> Parent container that holds various login components.
.login-pf-page <div> -- -- A container that holds the primary login container.
.container-fluid <div> .pf-c-login__container <div> Primary container that holds the login component itself.
.login-pf-page-header <header> .pf-c-login__header <header> Header container that sits outside of the login component.
.login-pf-brand <img> .pf-c-brand <img> Patternfly logo brand image tag.
-- -- .pf-c-login__main <main> Main login container.
-- -- .pf-c-login__main-body <div> Main form container.
.login-pf-header <header> .pf-c-login__main-header <header> Header container that sits inside of the login component.
.login-pf-signup <p> -- -- PF3 signup section.
.login-pf-settings <div> .pf-c-check <div> Login "Keep me logged in for 30 days" instructions.
.login-pf-page-footer <footer> .pf-c-login__footer <footer> Footer container that sits inside of the login component
-- -- .pf-c-login__main-footer <footer> Main footer container for social media logins.
.login-pf-page-footer-links <ul> .pf-c-list.pf-m-inline <ul> Terms and policy links.
.login-pf-page-footer-link <a> .pf-c-login__footer-link <a> Terms and policy linked a tags.