Base page template

patterns specs/patterns/base-page.kmd

The standard page shell every other template starts from: skip-link → header (brand bar + optional sign-in) → breadcrumb → main content region → footer, laid out inside the column grid with the safe-area insets honored. It is the scaffold, not a screen — it fixes the landmark order, the single <main>, and where global chrome lives, so CRUD, dashboard, report, error and session templates all compose it instead of re-deriving the frame. Modeled after the gov.br Padrão Digital `base` template (cabeçalho → breadcrumb → conteúdo → rodapé).

When this pattern applies

Primary triggers

All triggers

Base page template

Source: gov.br Padrão Digital base template — the page skeleton (cabeçalho, breadcrumb, conteúdo, rodapé) that every other gov.br template extends. In the Koder Stack it composes existing component specs; it defines their order and landmarks, not new UI.

R1 — Landmark order

A base page SHALL render, in this document order: a skip-link (components/skip-link.kmd) as the first focusable element, a header landmark (components/app-bars.kmd) carrying the brand bar and — where the surface authenticates — the sign-in / user badge (app-layout/topbar-placement.kmd), an optional breadcrumb (components/breadcrumb.kmd) below the header, exactly one <main> content region, and a footer landmark (components/footer.kmd). There SHALL be exactly one <main> per page.

R2 — Grid and safe area

The header, main, and footer SHALL align to the column grid (app-layout/column-grid.kmd) for the active window-size class, and the shell SHALL honor the safe-area insets (app-layout/safe-area.kmd) — top inset on the header, bottom inset on the footer — so no chrome sits under a notch or system bar.

R3 — Skip-link target

The skip-link SHALL move focus to the <main> region (its href targets the main landmark's id), so a keyboard user bypasses the header/breadcrumb in one action.

R4 — Breadcrumb is optional, last crumb is the page

When present, the breadcrumb's last crumb SHALL be the current page as a non-interactive label (per components/breadcrumb.kmd); a top-level page MAY omit the breadcrumb entirely.

R5 — Content is a slot

The <main> region is a slot: the base template SHALL NOT prescribe the in-content layout — CRUD, dashboard, report, form, error and session templates fill it. The base template owns only the frame (R1–R4) and the language toggle floor (en-US + pt-BR, per policies/language.kmd) exposed in the header or footer.

Composição

Every other template in this DS composes the base shell: error-page, crud-page, dashboard-page, report-page, form-page, session-page all render inside R1's <main> slot. This is the single place the page frame is defined; a template that re-derives the header/footer instead of composing base-page is not conformant.

References