Page header

Summary

The band between the application header and the page panel. It gives context to the content within the page. It combines the page title with optional breadcrumbs, a project/user avatar, metadata, and related actions. Avatar, breadcrumbs, and buttons are components in their own right, composed inside the page-header wrapper. This is a strict pattern: variation from the documented markup is not supported. -hero and -marketing variants give the larger promotional treatments.

Examples

A typical project page header: avatar, breadcrumbs above the title, grouped actions.

1. Projects
2. Infrastructure
3. Gateway

Gateway

Edit Share Settings

Title and actions only

Project settings

Save

HTML

<header class="neura-page-header">
  <div class="neura-page-header-inner">
    <div class="neura-page-header-image">
      <span class="neura-avatar neura-avatar-xlarge neura-avatar-project">
        <span class="neura-avatar-inner">
          <img src="…/project-64.png" alt="">
        </span>
      </span>
    </div>
    <div class="neura-page-header-main">
      <ol class="neura-nav neura-nav-breadcrumbs">
        <li><a href="/projects">Projects</a></li>
        <li><a href="/projects/infrastructure">Infrastructure</a></li>
        <li class="neura-nav-selected">Gateway</li>
      </ol>
      <h1>Gateway</h1>  <!-- heading level follows your page's
                             document outline (h1 or h2) -->
    </div>
    <div class="neura-page-header-actions">
      <div class="neura-buttons">
        <button class="neura-button">Edit</button>
        <button class="neura-button">Share</button>
        <button class="neura-button">Settings</button>
      </div>
    </div>
  </div>
</header>

CSS classes

AUI compatibility

Full parity: aui-page-header* aliases onto the Neura rules. CSS-only.