Site header

Usage

The top site header is the beige band at the top of every page. It holds the Vonheim wordmark, primary navigation, and a user-info slot on the right. It sits above the page header bar (which holds page-specific titles and sub-nav).

Anatomy

• .page-header-background — the beige band wrapper.
• .site-header — grid with three areas: logo, nav, user.
• .logo — serif wordmark, grid-area logo.
• .site-header > nav — primary nav with underline-on-active.
• .user-info — right slot; holds logout form (logged-in) or login button (logged-out).

Variants

Logged in

Logged out

Notes

• The logo font-size (1.5rem) is deliberately larger than the page-header h1 (1.25rem) — the wordmark should read as brand, not as page title.
• On narrow viewports (< 640px), the grid collapses to a two-row layout: logo + user-info on top, nav on the bottom.
• The .btn-sm variant uses an off-scale vertical padding for the tight header layout.