Page

Summary

The outside-in skeleton for an entire page: a #page wrapper holding the application header, the content region, and the footer. Neura styles both the class hooks (.neura-content, .neura-footer) and the literal #header / #content / #footer ids that server-rendered templates typically emit, so existing markup picks up the rules without rewriting. The stylesheet also sets the document background to the faint gray token (--neura-color-faint); the page panel and cards supply the white surfaces. Width modes on <body> are documented on Page layout.

When to use

Region	Role
`<div id="page">`	Root container for the whole page.
`<header id="header" role="banner">`	Holds the `neura-header` bar.
`<section id="content" role="main">` / `.neura-content`	The content region: page header and page panel go inside; direct children get the 20px content padding.
`<footer id="footer" role="contentinfo">` / `.neura-footer`	Page footer. Content goes in `.neura-footer-body`.
`.neura-footer-body`	Centered small-print block: link lists render as inline items, paragraphs stack below.

Examples

Entire page

The full skeleton at reduced scale: header bar, page header, page panel, and footer with a link list and a copyright line.

Page content lives in the panel.

HTML

Page skeleton

The canonical template, with ids for server-rendered pages (the class hooks work identically):

<body>  <!-- width modes go here, see Page layout -->
  <div id="page">
    <header id="header" role="banner">
      <nav class="neura-header" role="navigation">…</nav>
    </header>
    <section id="content" role="main">
      <header class="neura-page-header">…</header>
      <div class="neura-page-panel">…</div>
    </section>
    <footer id="footer" role="contentinfo">
      <section class="neura-footer-body">…</section>
    </footer>
  </div>
</body>

Footer

Inside .neura-footer-body, a <ul> renders as a centered inline link list and paragraphs stack below (the standard small-print treatment):

<footer class="neura-footer" role="contentinfo">
  <section class="neura-footer-body">
    <ul>
      <li><a href="/docs">Documentation</a></li>
      <li><a href="/support">Support</a></li>
      <li><a href="https://www.nsys.org">Nsys Platform</a></li>
    </ul>
    <p>Copyright © Nsys.org</p>
  </section>
</footer>

Entire page - complete document

The full markup of the example above as a save-and-open page (Neura loaded from the CDN, see Getting started):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Neura page</title>
    <link rel="stylesheet" href="https://neura.nsys.org/cdn/neura.css">
    <script src="https://neura.nsys.org/cdn/neura.umd.cjs"></script>
  </head>
  <body>
    <div id="page">
      <header id="header" role="banner">
        <nav class="neura-header" role="navigation">
          <div class="neura-header-inner">
            <div class="neura-header-primary">
              <h1 class="neura-header-logo">
                <a href="/"><span class="neura-header-logo-text">NSYS</span></a>
              </h1>
              <ul class="neura-nav">
                <li><a href="/dashboard">Dashboard</a></li>
                <li><a href="/projects">Projects</a></li>
              </ul>
            </div>
          </div>
        </nav>
      </header>
      <section id="content" role="main">
        <header class="neura-page-header">
          <div class="neura-page-header-inner">
            <div class="neura-page-header-main">
              <h2>Page title</h2>
            </div>
          </div>
        </header>
        <div class="neura-page-panel">
          <div class="neura-page-panel-inner">
            <section class="neura-page-panel-content">
              <p>Page content lives in the panel.</p>
            </section>
          </div>
        </div>
      </section>
      <footer id="footer" role="contentinfo">
        <section class="neura-footer-body">
          <ul>
            <li><a href="/docs">Documentation</a></li>
            <li><a href="/support">Support</a></li>
            <li><a href="https://www.nsys.org">Nsys Platform</a></li>
          </ul>
          <p>Copyright © Nsys.org</p>
        </section>
      </footer>
    </div>
  </body>
</html>

AUI compatibility

Full parity: AUI keyed these rules on the literal #header / #content / #footer ids and the unprefixed .footer-body class, and Neura honors the same ids and aliases the class, so server-rendered pages (e.g. Velocity decorators) port unchanged. The body marker classes from AUI-era templates (aui-layout, aui-theme-default) are inert and safe to keep.