##### Light Layout

settings Settings arrow_drop_down

- Access1
- Profile2
- Notifications

The light layout has a light color navbar, navigation menu and footer.

#### CSS Classes

In this page you can experience it. If you want to create a light version template you can use this layout.

This table contains classes related to the light layout. This is a custom layout classes for light layout page requirements.

Classes | Description
--- | ---
`.layout-light` | To set layout light you need to add `.layout-light` class in body `<body>` tag. Refer HTML markup line no 6.

#### HTML Markup

This section contains HTML Markup to create light layout. This markup define where to add css classes to make navbar, navigation & footer light.

- Line no 6: Just add `layout-light` class in body `<body>` tag as shown as below HTML markeup for light layout.

    <!DOCTYPE html>
    <html lang="en">
    <head></head>
    <body class="layout-light">
      <!-- Start Page Loading -->
      <div id="loader-wrapper">
      </div>
      <!-- End Page Loading -->

      <!-- //////////////////////////////////////////////////////////////////////////// -->

      <!-- START HEADER -->
      <header id="header" class="page-topbar">
      </header>
      <!-- END HEADER -->

      <!-- //////////////////////////////////////////////////////////////////////////// -->

      <!-- START MAIN -->
      <div id="main">
        <!-- START WRAPPER -->
        <div class="wrapper">

          <!-- START LEFT SIDEBAR NAV-->
          <aside id="left-sidebar-nav" class="nav-expanded nav-lock nav-collapsible">
          </aside>
          <!-- END LEFT SIDEBAR NAV-->

          <!-- //////////////////////////////////////////////////////////////////////////// -->

          <!-- START CONTENT -->
          <section id="content">
          </section>
          <!-- END CONTENT -->

          <!-- //////////////////////////////////////////////////////////////////////////// -->

          <!-- START RIGHT SIDEBAR NAV-->
          <aside id="right-sidebar-nav">
          </aside>
          <!-- LEFT RIGHT SIDEBAR NAV-->

        </div>
          <!-- END WRAPPER -->
       </div>
       <!-- END MAIN -->

          <!-- //////////////////////////////////////////////////////////////////////////// -->
          <!-- START FOOTER -->
          <footer class="page-footer gradient-45deg-purple-deep-orange">
          </footer>
          <!-- END FOOTER -->
    </body>
    </html>

add

- help_outline
- widgets
- today
- mail_outline