PF Next

Page

Page Layout, Nav Vertical Example

Preview

Page Layout Content test 2
Page Layout Content test 2
Page Layout Content test 2
Page Layout Content test 2
<div class="pf-l-page">
  <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">
        Logo
      </a>
    </div>
    <div class="pf-l-page__header-tools">
      pf-l-toolbar
    </div>
  </header>
  <aside class="pf-l-page__sidebar">
    <nav class="pf-c-nav" aria-label="Primary Nav Default Example">
      pf-c-nav
    </nav>
  </aside>
  <main role="main" class="pf-l-page__main">
    <section class="pf-l-page__main-section pf-m-dark-100">
      Page Layout Content test 2
    </section>
    <section class="pf-l-page__main-section pf-m-dark-200">
      Page Layout Content test 2
    </section>
    <section class="pf-l-page__main-section pf-m-light">
      Page Layout Content test 2
    </section>
    <section class="pf-l-page__main-section">
      Page Layout Content test 2
    </section>
  </main>
</div>

Page Layout, Nav Horizontal Example

Preview

Page Layout Content test 2
Page Layout Content test 2
Page Layout Content test 2
Page Layout Content test 2
<div class="pf-l-page">
  <header role="banner" class="pf-l-page__header">
    <div class="pf-l-page__header-brand">
      Logo
    </div>
    <div class="pf-l-page__header-nav">
      pf-c-nav
    </div>
    <div class="pf-l-page__header-tools">
      pf-l-toolbar
    </div>
  </header>
  <main role="main" class="pf-l-page__main">
    <section class="pf-l-page__main-section pf-m-dark-100">
      Page Layout Content test 2
    </section>
    <section class="pf-l-page__main-section pf-m-dark-200">
      Page Layout Content test 2
    </section>
    <section class="pf-l-page__main-section pf-m-light">
      Page Layout Content test 2
    </section>
    <section class="pf-l-page__main-section">
      Page Layout Content test 2
    </section>
  </main>
</div>

Documentation

Overview

This layout provides the basic chrome for a page, including sidebar, header and main areas.

Accessibility

Attribute Applied To Outcome
role="banner" .pf-l-page__header Identifies the element that serves as the banner region. Required
role="main" .pf-l-page__main Identifies the element that serves as the main region. Required

Usage

Class Applied To Outcome
.pf-l-page <div> Declares the page layout.
.pf-l-page__header <header> Declares the page header.
.pf-l-page__header-brand <div> Creates a header container to nest the brand component.
.pf-l-page__header-brand-toggle <div> Creates a container to nest the sidebar toggle.
.pf-l-page__header-brand-link <a> Creates a link for the brand logo.
.pf-l-page__header-selector <div> Creates a header container to nest the context selector component.
.pf-l-page__header-nav <div> Creates a container to nest the navigation component in the header.
.pf-l-page__header-tools <div> Creates a header container to nest the toolbar layout.
.pf-l-page__sidebar <aside> Declares the page sidebar.
.pf-l-page__main <main> Declares the main page area.
.pf-l-page__main-nav <section> Creates a container to nest the navigation component in the main page area.
.pf-l-page__main-section <section> Creates a section container in the main page area.
.pf-m-expanded .pf-l-page__sidebar Modifies the sidebar for the expanded state.
.pf-m-collapsed .pf-l-page__sidebar Modifies the sidebar for the collapsed state.
.pf-m-light .pf-l-page__main-section Modifies a main page section to have a light theme.
.pf-m-dark-200 .pf-l-page__main-section Modifies a main page section to have a dark theme and a dark transparent background.
.pf-m-dark-100 .pf-l-page__main-section Modifies a main page section to have a dark theme and a darker transparent background.
.pf-m-tall .pf-l-page__header Modifies header to tallest height on desktop. This class should be added on desktop/toggled on scroll via Javascript.