PF Next

Login

Login Simple

Preview

This Preview can only be accessed in full page mode.
<div class="pf-l-login">
  <div class="pf-l-login__container">
    <header class="pf-l-login__header">
      <div class="pf-l-login__header-brand">
        Header Brand
      </div>
      Header Text
    </header>
    <main class="pf-l-login__main">
      Main
    </main>
    <footer class="pf-l-login__footer">
      Footer
    </footer>
  </div>
</div>

Documentation

Overview

The Login layout will place the login page elements in the correct position.

Usage

Class Applied To Outcome
.pf-l-login <div> Initializes the login layout.
.pf-l-login__container <div> Correctly positions the login structure.
.pf-l-login__header <header> Positions the login header.
.pf-l-login__header-brand <div> Positions the logo within the header.
.pf-l-login__main <main> Positions the login main area.
.pf-l-login__footer <footer> Positions the login footer.