Basics

A <header class="canon-page-header"> at the top of a page's <main>, under the Top Bar: what stays the same on every page goes in the bar, what belongs to this page goes here. A collection's page: its name as the title, a line of facts, and its actions, the primary one (data-emphasis="high") last. At most one primary action, and only when one action is what the page is for.

A view to read

A page only for reading (a log, a report) has no primary action: its actions are all neutral, or there are none. The primary action is for when one thing is what the page is for.

A record

The same header for one record: a back link to its collection above the title, its status (a Tag) beside it, and what you can do to it.

A trail

Deeper in, a Breadcrumb instead of the back link. Where people are is the page's, so it lives here, not in the Top Bar.

Rename in place

A Button with command="--canon-edit" aimed at the title edits it where it is: Enter or clicking away keeps the change, Esc drops it. canon-edit fires on the title first (detail.value, detail.previous); cancel it to keep the old name (when saving fails, say).

Rename it to see the event.

Sticky

data-sticky: the header stays under the Top Bar while the page scrolls (scroll inside the frame), its back link or trail tucked away above it, so the title and the actions stay in sight. Once stuck it takes a line under it. It reaches across the page's side padding: set --canon-page-inset to it.

Narrow

When the actions leave the title less room than it needs, they fold into one More menu, the primary action staying; a trail that doesn't fit its row keeps its last page. Very narrow, the actions go under the title. Drag the frame's corner to try it.

Sizes

data-size on the header or a container (an App Shell): sm, md, lg.

Edge cases

Right to left, the back link points the other way and the actions sit on the left. A page that needs no visible title (a dashboard named by its sidebar link) keeps one for screen readers, visually hidden.