Page header

Summary

A structured title block for detail pages: an optional image/avatar at the start, the title (with optional status badge) and a muted description in the middle, and page-level actions flush at the inline end. For simple pages, the plain .soma-page-title (optionally with an inline .soma-page-subtitle) is all you need. Either way, the title is the page's single <h1>.

When to use

FormUse it for
.soma-page-headerDetail pages about one entity (a project, service, user) where identity, description and actions belong together.
h1.soma-page-title aloneListings, dashboards, settings — a heading is enough.
Inline .soma-page-subtitleA short muted qualifier after the title ("Dashboard — statistics and more").
Badge in the titleThe entity's status at a glance: LIVE, archived, degraded (see Badges).
.soma-page-header-actionsActions on the page's subject itself. Actions scoped to a content region belong in a toolbar instead.
-image shapePerson page → default circle avatar; entity page (project, app, service) → .soma-avatar-square (see Avatars).
BreadcrumbsPlace .soma-breadcrumbs above the title inside -main. The header is their documented home on detail pages.
Actions slot contentsAny inline-end control: buttons, a dropdown trigger, or a compact progress readout; not just buttons.

Examples

In an app the title is the page's <h1>; these demos use <h2> only because this docs page already has one.

Full block

Image · title with badge · description · actions. The square avatar is deliberate, since this page's subject is an entity (person pages use the default circle):

PX

Project X LIVE

Production workloads for the US East region.

Plain title

soma-page-title with an inline subtitle:

Dashboard statistics and more

Without an image

Main + actions only:

Billing

Invoices, payment methods and spending limits.

With breadcrumbs

The trail sits above the title inside the main slot:

Soma

Component library for the Nware platform.

HTML

<!-- Heading level: use the page's real outline level (h1 on a page) -->
<div class="soma-page-header">
  <div class="soma-page-header-image">
    <span class="soma-avatar soma-avatar-xlarge soma-avatar-square soma-avatar-initials">PX</span>
  </div>
  <div class="soma-page-header-main">
    <h1 class="soma-page-title">Project X</h1>
    <p>Production workloads for the US East region.</p>
  </div>
  <div class="soma-page-header-actions">
    <button class="soma-button">Edit</button>
    <button class="soma-button soma-button-danger">Delete</button>
  </div>
</div>

<!-- plain form -->
<h1 class="soma-page-title">Dashboard
  <span class="soma-page-subtitle">statistics and more</span></h1>

CSS classes

ClassEffect
.soma-page-headerThe flex block; zeroes the nested title's margins and mutes its description <p>.
.soma-page-header-imageFixed slot at the start: an avatar or logo.
.soma-page-header-mainFlexible middle: the title plus an optional description paragraph.
.soma-page-header-actionsButtons flush at the inline end, optically aligned with the title.
.soma-page-titleThe page's <h1> — display size, regular weight.
.soma-page-subtitleMuted inline qualifier inside the title.

JavaScript

None. The page header is pure CSS.