# Main Layout

WIP

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <nv>
        <h3>Navbar & Header go here</h3>
    </nv>
    <main class="main-layout">
        <h2>Main content Area of pages</h2>
    </main>
    <footer>
        <h3>Footer Area</h3>
    </footer>

`
`

    <nv><h3>Navbar & Header go here</h3></nv>
    <main class="main-layout">
        <h2>Main content Area of pages</h2>
    </main>
    <footer><h3>Footer Area</h3></footer>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .main-layout {
        display: flex;
        flex-direction: column;
        align-items: center;

        > * + * {
          margin-top: $spacer-base;
        }

        > :first-child {
          margin-top: $spacer-lg;
        }

        @media screen and (min-width: $grid-breakpoint-md) {
          > * + * {
            margin-top: $spacer-lg;
          }

          > :first-child {
            margin-top: $spacer-xl;
          }
        }
      }

  `
- URL: /components/raw/main-layout/_main-layout.scss
- Filesystem Path: components/02-layouts/page-layouts/main-layout/_main-layout.scss
- Size: 350 Bytes

- Handle: @main-layout
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/02-layouts/page-layouts/main-layout/main-layout.html

No notes defined.