Header, Footer, Page header, App shell

Page-level patterns built from the primitives: site header and footer, page header, and the app shell with sidebar.

CSS only components/patterns.css

Header and page header

<header class="dsgn-header" data-sticky="false"><div class="dsgn-container dsgn-cluster" data-justify="between" data-nowrap>
  <a class="dsgn-brand" href="#patterns"><span class="dsgn-brand-mark">N</span>Novama</a>
  <nav class="dsgn-nav" data-hide-below="desktop" aria-label="Header example"><a class="dsgn-nav-link" href="#patterns" aria-current="page">Features</a><a class="dsgn-nav-link" href="#patterns">Pricing</a></nav>
  <div class="dsgn-cluster" data-nowrap><button class="dsgn-button">Start free</button></div></div></header>
<div class="dsgn-container" style="padding-block: var(--dsgn-space-24)"><div class="dsgn-page-header">
  <nav class="dsgn-breadcrumbs" aria-label="Page header example"><ol><li><a href="#patterns">Workspace</a></li><li><a aria-current="page">Invoices</a></li></ol></nav>
  <div class="dsgn-cluster" data-justify="between"><p class="dsgn-page-header-title">Invoices</p><div class="dsgn-cluster"><button class="dsgn-button"><span class="dsgn-icon" aria-hidden="true">add</span>New invoice</button></div></div></div></div>
<footer class="dsgn-footer" style="--dsgn-section-pad-y: var(--dsgn-space-32)"><div class="dsgn-container dsgn-stack" data-gap="l">
  <div class="dsgn-footer-top"><div class="dsgn-footer-brand"><a class="dsgn-brand" href="#patterns"><span class="dsgn-brand-mark">N</span>Novama</a><p>Invoicing for small studios.</p></div>
  <div class="dsgn-footer-columns"><div><h2 class="dsgn-footer-title">Product</h2><ul class="dsgn-footer-links"><li><a href="#patterns">Features</a></li><li><a href="#patterns">Pricing</a></li></ul></div>
  <div><h2 class="dsgn-footer-title">Company</h2><ul class="dsgn-footer-links"><li><a href="#patterns">About</a></li><li><a href="#patterns">Contact</a></li></ul></div></div></div>
  <div class="dsgn-footer-legal dsgn-cluster" data-justify="between"><span>© 2026 Novama s.r.o.</span><span>IČO 12345678</span></div></div></footer>

Header layouts and navigation styles

data-layout="start" (brand and nav left, actions right) with data-variant="underline" navigation; data-layout="middle" (nav centred) with data-variant="text"; data-layout="center" (brand centred, nav and actions below; below desktop: menu left, brand centred, actions right). The actions sit in .dsgn-header-actions and the menu button is .dsgn-header-menu.

NNovama

<header class="dsgn-header" data-sticky="false" data-layout="start"><div class="dsgn-container dsgn-cluster" data-justify="between" data-nowrap>
  <a class="dsgn-brand" href="#patterns"><span class="dsgn-brand-mark">N</span>Novama</a>
  <nav class="dsgn-nav" data-variant="underline" data-hide-below="desktop" aria-label="Start layout"><a class="dsgn-nav-link" href="#patterns" aria-current="page">Features</a><a class="dsgn-nav-link" href="#patterns">Pricing</a><a class="dsgn-nav-link" href="#patterns">FAQ</a></nav>
  <div class="dsgn-cluster dsgn-header-actions" data-nowrap><a class="dsgn-button" data-variant="ghost" data-intent="neutral" href="#patterns" data-hide-below="tablet">Log in</a><button class="dsgn-button">Start free</button></div>
  <button class="dsgn-icon-button dsgn-header-menu" data-variant="ghost" data-intent="neutral" data-hide-above="tablet" aria-label="Open menu"><span class="dsgn-icon" aria-hidden="true">menu</span></button></div></header>
<header class="dsgn-header" data-sticky="false" data-layout="middle"><div class="dsgn-container dsgn-cluster" data-justify="between" data-nowrap>
  <a class="dsgn-brand" href="#patterns"><span class="dsgn-brand-mark">N</span>Novama</a>
  <nav class="dsgn-nav" data-variant="text" data-hide-below="desktop" aria-label="Middle layout"><a class="dsgn-nav-link" href="#patterns" aria-current="page">Features</a><a class="dsgn-nav-link" href="#patterns">Pricing</a><a class="dsgn-nav-link" href="#patterns">FAQ</a></nav>
  <div class="dsgn-cluster dsgn-header-actions" data-nowrap><a class="dsgn-button" data-variant="ghost" data-intent="neutral" href="#patterns" data-hide-below="tablet">Log in</a><button class="dsgn-button">Start free</button></div>
  <button class="dsgn-icon-button dsgn-header-menu" data-variant="ghost" data-intent="neutral" data-hide-above="tablet" aria-label="Open menu"><span class="dsgn-icon" aria-hidden="true">menu</span></button></div></header>
<header class="dsgn-header" data-sticky="false" data-layout="center"><div class="dsgn-container dsgn-cluster" data-justify="between" data-nowrap>
  <a class="dsgn-brand" href="#patterns"><span class="dsgn-brand-mark">N</span>Novama</a>
  <nav class="dsgn-nav" data-variant="underline" data-hide-below="desktop" aria-label="Center layout"><a class="dsgn-nav-link" href="#patterns" aria-current="page">Features</a><a class="dsgn-nav-link" href="#patterns">Pricing</a><a class="dsgn-nav-link" href="#patterns">FAQ</a></nav>
  <div class="dsgn-cluster dsgn-header-actions" data-nowrap><a class="dsgn-button" data-variant="ghost" data-intent="neutral" href="#patterns" data-hide-below="tablet">Log in</a><button class="dsgn-button">Start free</button></div>
  <button class="dsgn-icon-button dsgn-header-menu" data-variant="ghost" data-intent="neutral" data-hide-above="tablet" aria-label="Open menu"><span class="dsgn-icon" aria-hidden="true">menu</span></button></div></header>

Header surfaces and scroll behaviour

data-surface="glass": frosted (solid where blur is unsupported or reduced transparency is on). data-floating: on tablet and desktop a rounded box as wide as the content, offset from the top, widening a little once the page scrolls. data-surface="transparent" is see-through at the top of the page (add data-top-theme="dark" over a dark hero) and turns to glass when scrolled; it overlaps the first section. data-hide-on-scroll hides the header on mobile while scrolling down. Remove data-sticky="false" to keep the header on screen. dsgn.js sets the scroll states.

NNovama

<header class="dsgn-header" data-layout="start" data-surface="transparent" data-top-theme="dark" data-floating data-hide-on-scroll>…</header>
<section class="dsgn-section" data-theme="dark">hero, starts under the header</section>

App shell

Full-page layout; see it live in the layout demo. Markup:

<div class="dsgn-app">
  <aside class="dsgn-app-sidebar"><a class="dsgn-brand" href="/">…</a><nav class="dsgn-nav" data-orientation="vertical">…</nav>
    <div class="dsgn-app-sidebar-footer">…</div></aside>
  <div class="dsgn-app-main">
    <header class="dsgn-app-topbar">…search, actions…</header>
    <main class="dsgn-app-content">…page header, content…</main>
  </div>
</div>

Usage

Everything inside them is layout primitives + components (see the snippets in docs).

Site header <header class="dsgn-header" data-layout="start|middle|center" data-surface="solid|glass|transparent" data-floating data-sticky="false" data-hide-on-scroll data-top-theme="dark">

Site footer <footer class="dsgn-footer"><div class="dsgn-container dsgn-stack" data-gap="xl">

Page header <div class="dsgn-page-header"> breadcrumbs · title + actions · lead </div> App shell <div class="dsgn-app"><aside class="dsgn-app-sidebar">…</aside> (top bar: data-surface="solid|glass", else the page's material)

Details

Classes: .dsgn-header .dsgn-section .dsgn-header-menu .dsgn-container .dsgn-nav .dsgn-header-actions .dsgn-brand .dsgn-brand-mark .dsgn-footer .dsgn-footer-title .dsgn-footer-links .dsgn-footer-top .dsgn-footer-brand .dsgn-footer-columns .dsgn-footer-legal .dsgn-page-header .dsgn-page-header-title .dsgn-app .dsgn-app-sidebar .dsgn-app-sidebar-footer .dsgn-app-main .dsgn-app-topbar .dsgn-app-content
Tokens used: --dsgn-accent-solid --dsgn-accent-solid-text --dsgn-blur-chrome --dsgn-border --dsgn-container-max --dsgn-control-gap --dsgn-control-height --dsgn-control-line-height --dsgn-control-pad-y --dsgn-duration --dsgn-ease --dsgn-focus --dsgn-focus-offset --dsgn-focus-width --dsgn-font-size-body-s --dsgn-font-size-caption --dsgn-font-size-heading --dsgn-font-size-title --dsgn-font-weight-semibold --dsgn-grid-gap --dsgn-header-height --dsgn-line-container --dsgn-line-height-body-s --dsgn-line-height-heading --dsgn-line-separator --dsgn-page-margin --dsgn-radius-l --dsgn-radius-s --dsgn-section-pad-y --dsgn-shadow-control --dsgn-shadow-raised --dsgn-space-12 --dsgn-space-16 --dsgn-space-20 --dsgn-space-24 --dsgn-space-32 --dsgn-space-64 --dsgn-space-8 --dsgn-surface-base --dsgn-surface-chrome --dsgn-surface-glass --dsgn-surface-raised --dsgn-surface-sunken --dsgn-text --dsgn-text-muted
In Figma: Header · Footer · Page header · App shell · Brand · Hero · CTA band · Footer column · Section header · Header surface
Import alone: dsgn.systems/components/patterns.css