Page
Summary
The outside-in anatomy of a complete Soma page. The
shell frames every screen (navbar,
sidebar, content region), and inside the content region a page
composes top-to-bottom: an optional breadcrumb trail, the
page header (title, description,
actions), the content itself, and the footer for
small print. The content takes one of two shapes:
widgets on the
grid (on Soma's tinted page,
widgets are the surfaces), or a
page panel: one full-width rounded
translucent card holding the whole content area, with optional
nav and sidebar cells, for pages that read as a single
document rather than a dashboard. Landmark roles come from the elements: the navbar
in a <header> (banner), the content in
<main>, the footer in
<footer> (contentinfo). Screen-reader users
jump between them directly.
When to use
| Region | Role |
|---|---|
.soma-shell | Root grid holding navbar + sidebar + content. One per document. |
<header class="soma-navbar"> | The banner landmark: brand, global nav, search, actions (Navbar; live in the Shell demo). |
<aside class="soma-sidebar"> | App navigation; collapses below 900px. |
<main class="soma-shell-content"> | The main landmark. Width modes and the grid are on Page layout. |
.soma-page-header / .soma-page-title | The page's own heading block (Page header). |
.soma-page-panel | The main content surface: a full-width card between page header and footer, when the content is one document rather than a widget dashboard. |
<footer class="soma-footer"> | Small print at the end of the content: link list + copyright in .soma-footer-body. |
Examples
Entire page: complete document
The same page as the demo above, as a complete document you can
save and open. It consumes the CDN build,
so there is no install and no build step. Swap the pinned
/cdn/0.1.0/… paths for /cdn/soma.css /
/cdn/soma.umd.cjs to track the latest release
instead.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard — Nware Portal</title>
<link rel="stylesheet" href="https://soma.nware.io/cdn/0.1.0/soma.css" />
<script src="https://soma.nware.io/cdn/0.1.0/soma.umd.cjs"></script>
</head>
<body>
<div class="soma-shell">
<header class="soma-navbar">
<span class="soma-navbar-brand">Nware <strong>Portal</strong></span>
<nav class="soma-navbar-nav" aria-label="Primary">
<ul>
<li><a href="#" aria-current="page">Dashboard</a></li>
<li><a href="#">Deployments</a></li>
</ul>
</nav>
<div class="soma-navbar-secondary">
<button class="soma-navbar-action" aria-label="Notifications">
<span class="soma-icon soma-icon-bell"></span>
</button>
<span class="soma-avatar soma-avatar-small soma-avatar-initials">an</span>
</div>
</header>
<aside class="soma-sidebar">
<nav class="soma-sidebar-nav" aria-label="Main">
<span class="soma-sidebar-heading">Apps</span>
<a class="soma-sidebar-link soma-active" href="#">Dashboard</a>
<a class="soma-sidebar-link" href="#">Deployments</a>
</nav>
</aside>
<main class="soma-shell-content">
<div class="soma-page-header">
<div class="soma-page-header-main">
<h1 class="soma-page-title">Dashboard</h1>
<p>Everything running on Project X.</p>
</div>
<div class="soma-page-header-actions">
<button class="soma-button soma-button-primary">Deploy</button>
</div>
</div>
<div class="soma-grid">
<section class="soma-widget soma-col-6">
<div class="soma-widget-body">
<div class="soma-stat">
<span class="soma-stat-label">Deployments</span>
<span class="soma-stat-value">50</span>
</div>
</div>
</section>
<section class="soma-widget soma-col-6">
<div class="soma-widget-body">
<div class="soma-stat">
<span class="soma-stat-label">Services</span>
<span class="soma-stat-value">12</span>
</div>
</div>
</section>
</div>
<footer class="soma-footer">
<div class="soma-footer-body">
<ul>
<li><a href="#">Docs</a></li>
<li><a href="#">Status</a></li>
<li>v0.1.0</li>
</ul>
<p>© 2026 Nware Labs · Apache-2.0</p>
</div>
</footer>
</main>
</div>
</body>
</html>HTML
The complete document skeleton. This is what a server-rendered portal page emits:
<body>
<div class="soma-shell">
<header class="soma-navbar">…</header>
<aside class="soma-sidebar">…</aside>
<main class="soma-shell-content">
<nav class="soma-breadcrumbs" aria-label="Breadcrumbs">…</nav>
<div class="soma-page-header">
<div class="soma-page-header-main">
<h1 class="soma-page-title">Dashboard</h1>
</div>
<div class="soma-page-header-actions">…</div>
</div>
<div class="soma-grid">
<section class="soma-widget soma-col-6">…</section>
<section class="soma-widget soma-col-6">…</section>
</div>
<footer class="soma-footer">
<div class="soma-footer-body">
<ul><li><a href="…">Docs</a></li><li>v0.1.0</li></ul>
<p>© 2026 Nware Labs</p>
</div>
</footer>
</main>
</div>
</body>
A <footer> inside <main> is
deliberately not a landmark — the small print belongs to the
page's content flow. Put the footer element directly inside
<body> instead when it should be a
jump-target contentinfo landmark of its own.
The panel-based variant swaps the widget grid for one content card; nav and sidebar cells are optional and compose in any combination:
<main class="soma-shell-content">
<div class="soma-page-header">…</div>
<div class="soma-page-panel">
<nav class="soma-page-panel-nav soma-nav-vertical" aria-label="Section">
<a class="soma-nav-item" aria-current="page" href="…">General</a>
<a class="soma-nav-item" href="…">Members</a>
</nav>
<section class="soma-page-panel-content">
…the page's document content…
</section>
<aside class="soma-page-panel-sidebar">
…related material…
</aside>
</div>
<footer class="soma-footer">…</footer>
</main>CSS classes
| Class | Effect |
|---|---|
.soma-page-panel | The full-width content card: translucent widget surface, rounded corners, soft shadow. Cells inside lay out side by side and stack below 768px. |
.soma-page-panel-nav | 240px navigation cell with an inline-end divider. Combine with .soma-nav-vertical for the standard link list. |
.soma-page-panel-content | The flexing main cell. It takes whatever the nav and sidebar leave. |
.soma-page-panel-sidebar | 35% sidebar cell with an inline-start divider; narrows to 30% when a nav cell is present. |
.soma-page-panel-item | Padding-free flexing cell for full-bleed content (tables, media). |
.soma-footer | Muted, centred small print with generous top spacing. |
.soma-footer-body | The content block: a <ul> renders as an inline, middot-separated link list; paragraphs stack below it. |
| Shell / header / layout classes | Documented on their own pages: Shell, Page header, Page layout, Widgets. |
JavaScript
None — the page skeleton is pure CSS. Auto-init wires whatever
interactive components the page contains (sidebar groups,
dropdown triggers, messages, …) on DOMContentLoaded.