From 1420be1aec8bf5c4d250f8c2b26146b44fb24c49 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Thu, 28 Nov 2024 00:16:53 +0100
Subject: [PATCH 1/4] chore: update experiments

---
 apps/experiments/amsterdam-theme.css      |  10 +-
 apps/experiments/purmerend-theme.css      |  10 +-
 apps/experiments/rijkshuisstijl-theme.css |  10 +-
 apps/experiments/rods-theme.css           |  10 +-
 apps/experiments/style.css                | 107 ----------------------
 apps/experiments/utrecht-theme.css        |  10 +-
 apps/experiments/utrecht.html             |  13 ++-
 7 files changed, 35 insertions(+), 135 deletions(-)

diff --git a/apps/experiments/amsterdam-theme.css b/apps/experiments/amsterdam-theme.css
index 4b43e01aed4..e615a1baf5c 100644
--- a/apps/experiments/amsterdam-theme.css
+++ b/apps/experiments/amsterdam-theme.css
@@ -9,10 +9,10 @@
   --utrecht-nav-bar-content-background-color: white;
   --utrecht-nav-bar-content-color: white;
   --utrecht-nav-bar-content-max-inline-size: var(--basis-page-max-inline-size);
-  --utrecht-page-content-content-background-color: white;
-  --utrecht-page-content-content-color: black;
-  --utrecht-page-content-content-max-inline-size: var(--basis-page-max-inline-size);
-  --utrecht-page-content-content-padding-inline: var(--basis-page-padding);
+  --utrecht-page-body-content-background-color: white;
+  --utrecht-page-body-content-color: black;
+  --utrecht-page-body-content-max-inline-size: var(--basis-page-max-inline-size);
+  --utrecht-page-body-content-padding-inline: var(--basis-page-padding);
   --utrecht-page-footer-background-color: var(--ams-spotlight-dark-blue-background-color);
   --utrecht-page-footer-color: white;
   --utrecht-page-footer-content-max-inline-size: var(--basis-page-max-inline-size);
@@ -28,7 +28,7 @@
   --utrecht-root-color: var(--utrecht-color-grey-10);
   --utrecht-page-header-padding-inline: var(--basis-page-padding);
   --utrecht-page-nav-bar-padding-inline: var(--basis-page-padding);
-  --utrecht-page-content-padding-inline: var(--basis-page-padding);
+  --utrecht-page-body-padding-inline: var(--basis-page-padding);
   --utrecht-page-footer-padding-inline: 0;
   --utrecht-root-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
   --utrecht-logo-min-block-size: 58.97px;
diff --git a/apps/experiments/purmerend-theme.css b/apps/experiments/purmerend-theme.css
index ca530556ee3..5510bfa9d84 100644
--- a/apps/experiments/purmerend-theme.css
+++ b/apps/experiments/purmerend-theme.css
@@ -3,11 +3,11 @@
   --utrecht-nav-bar-content-background-color: white;
   --utrecht-nav-bar-content-color: rgb(0 54 95);
   --utrecht-nav-bar-content-max-inline-size: var(--basis-page-max-inline-size);
-  --utrecht-page-content-content-background-color: white;
-  --utrecht-page-content-content-color: rgb(0 54 95);
-  --utrecht-page-content-content-max-inline-size: var(--basis-page-max-inline-size);
-  --utrecht-page-content-content-padding-inline: 1em;
-  --utrecht-page-content-padding-inline: 1em;
+  --utrecht-page-body-content-background-color: white;
+  --utrecht-page-body-content-color: rgb(0 54 95);
+  --utrecht-page-body-content-max-inline-size: var(--basis-page-max-inline-size);
+  --utrecht-page-body-content-padding-inline: 1em;
+  --utrecht-page-body-padding-inline: 1em;
   --utrecht-page-footer-background-color: rgb(0 54 95);
   --utrecht-page-footer-color: white;
   --utrecht-page-footer-content-max-inline-size: var(--basis-page-max-inline-size);
diff --git a/apps/experiments/rijkshuisstijl-theme.css b/apps/experiments/rijkshuisstijl-theme.css
index 2497c0af281..63897d43b27 100644
--- a/apps/experiments/rijkshuisstijl-theme.css
+++ b/apps/experiments/rijkshuisstijl-theme.css
@@ -7,10 +7,10 @@
 
   /* todo */
   --utrecht-nav-bar-content-color: white;
-  --utrecht-page-content-content-background-color: white;
-  --utrecht-page-content-content-color: black;
-  --utrecht-page-content-content-max-inline-size: var(--basis-page-max-inline-size);
-  --utrecht-page-content-content-padding-inline: var(--basis-page-padding);
+  --utrecht-page-body-content-background-color: white;
+  --utrecht-page-body-content-color: black;
+  --utrecht-page-body-content-max-inline-size: var(--basis-page-max-inline-size);
+  --utrecht-page-body-content-padding-inline: var(--basis-page-padding);
   --utrecht-page-footer-background-color: #01689b;
   --utrecht-page-footer-color: white;
   --utrecht-page-footer-content-max-inline-size: var(--basis-page-max-inline-size);
@@ -25,7 +25,7 @@
   --utrecht-root-background-color: var(--utrecht-color-grey-95, hsl(0 0% 95%));
   --utrecht-page-header-padding-inline: var(--basis-page-padding);
   --utrecht-page-nav-bar-padding-inline: var(--basis-page-padding);
-  --utrecht-page-content-padding-inline: var(--basis-page-padding);
+  --utrecht-page-body-padding-inline: var(--basis-page-padding);
   --utrecht-page-footer-padding-inline: 0;
   --utrecht-root-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
   --utrecht-logo-min-block-size: 58.97px;
diff --git a/apps/experiments/rods-theme.css b/apps/experiments/rods-theme.css
index 6f8a6450c73..468f7df48c7 100644
--- a/apps/experiments/rods-theme.css
+++ b/apps/experiments/rods-theme.css
@@ -13,10 +13,10 @@
   --utrecht-nav-bar-content-max-inline-size: var(--basis-page-max-inline-size);
 
   /* todo */
-  --utrecht-page-content-content-background-color: white;
-  --utrecht-page-content-content-color: black;
-  --utrecht-page-content-content-max-inline-size: var(--basis-page-max-inline-size);
-  --utrecht-page-content-content-padding-inline: var(--basis-page-padding);
+  --utrecht-page-body-content-background-color: white;
+  --utrecht-page-body-content-color: black;
+  --utrecht-page-body-content-max-inline-size: var(--basis-page-max-inline-size);
+  --utrecht-page-body-content-padding-inline: var(--basis-page-padding);
   --utrecht-page-footer-background-color: #00811f;
   --utrecht-page-footer-color: white;
   --utrecht-page-footer-content-max-inline-size: var(--basis-page-max-inline-size);
@@ -32,7 +32,7 @@
   --utrecht-root-color: var(--utrecht-color-grey-10);
   --utrecht-page-header-padding-inline: var(--basis-page-padding);
   --utrecht-page-nav-bar-padding-inline: var(--basis-page-padding);
-  --utrecht-page-content-padding-inline: var(--basis-page-padding);
+  --utrecht-page-body-padding-inline: var(--basis-page-padding);
   --utrecht-page-footer-padding-inline: 0;
   --utrecht-root-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
 }
diff --git a/apps/experiments/style.css b/apps/experiments/style.css
index ee68fa0c735..220bd743275 100644
--- a/apps/experiments/style.css
+++ b/apps/experiments/style.css
@@ -8,117 +8,10 @@
   }
 }
 
-.utrecht-body {
-  align-items: flex-start;
-  block-size: 100%;
-  margin-block-end: 0;
-  margin-block-start: 0;
-
-  /* reset `<body>` styles for `margin` and `padding` */
-
-  /*  display: flex; */
-
-  /*  flex-direction: column;
-  justify-content: flex-start; */
-  margin-inline-end: 0;
-  margin-inline-start: 0;
-  min-block-size: 100vb;
-  padding-block: 0;
-}
-
-.utrecht-page-layout {
-  align-items: flex-start;
-  block-size: 100%;
-  display: flex;
-  flex-direction: column;
-  inline-size: 100%;
-  justify-content: flex-start;
-}
-
 *[hidden] {
   display: none !important;
 }
 
-.utrecht-page-header {
-  background-color: var(--utrecht-page-header-background-color);
-  border-block-end-color: var(--utrecht-page-header-border-block-end-color, currentColor);
-  border-block-end-style: solid;
-  border-block-end-width: var(--utrecht-page-header-border-block-end-width, 0);
-  box-sizing: border-box;
-  color: var(--utrecht-page-header-color);
-  display: flex;
-  inline-size: 100%;
-  justify-content: center;
-}
-
-.utrecht-page-header__content {
-  background-color: var(--utrecht-page-header-content-background-color);
-  box-sizing: border-box;
-  color: var(--utrecht-page-header-content-color);
-  inline-size: 100%;
-  max-inline-size: var(--utrecht-page-header-content-max-inline-size);
-  padding-block-end: var(--utrecht-page-header-content-padding-block-end);
-  padding-block-start: var(--utrecht-page-header-content-padding-block-start);
-  padding-inline: var(--utrecht-page-header-content-padding-inline);
-}
-
-.utrecht-nav-bar {
-  background-color: var(--utrecht-nav-bar-background-color);
-  box-sizing: border-box;
-  color: var(--utrecht-nav-bar-color);
-  display: flex;
-  inline-size: 100%;
-  justify-content: center;
-  min-block-size: 44px;
-}
-
-.utrecht-nav-bar__content {
-  background-color: var(--utrecht-nav-bar-content-background-color);
-  box-sizing: border-box;
-  color: var(--utrecht-nav-bar-content-color);
-  inline-size: 100%;
-  max-inline-size: var(--utrecht-nav-bar-content-max-inline-size);
-}
-
-.utrecht-page-content {
-  background-color: var(--utrecht-page-content-background-color);
-  box-sizing: border-box;
-  color: var(--utrecht-page-content-color);
-  display: flex;
-  flex-grow: 1;
-  inline-size: 100%;
-  justify-content: center;
-}
-
-.utrecht-page-content__content {
-  background-color: var(--utrecht-page-content-content-background-color);
-  box-sizing: border-box;
-  color: var(--utrecht-page-content-content-color);
-  inline-size: 100%;
-  max-inline-size: var(--utrecht-page-content-content-max-inline-size);
-  padding-inline: var(--utrecht-page-content-content-padding-inline);
-}
-
-.utrecht-page-footer {
-  background-color: var(--utrecht-page-footer-background-color);
-  box-sizing: border-box;
-  color: var(--utrecht-page-footer-color);
-  display: flex;
-  inline-size: 100%;
-  justify-content: center;
-}
-
-.utrecht-page-footer__content {
-  background-color: var(--utrecht-page-footer-content-background-color);
-  box-sizing: border-box;
-  color: var(--utrecht-page-footer-content-color);
-  inline-size: 100%;
-  max-inline-size: var(--utrecht-page-footer-content-max-inline-size);
-  padding-block-end: var(--utrecht-page-footer-content-padding-block-end);
-  padding-block-start: var(--utrecht-page-footer-content-padding-block-start);
-  padding-inline: var(--utrecht-page-footer-content-padding-inline);
-}
-
 .utrecht-text-content {
   /* TODO: calculate based on font-family and font-size */
   max-inline-size: 60em;
diff --git a/apps/experiments/utrecht-theme.css b/apps/experiments/utrecht-theme.css
index d342c11929a..8d66a0ce2cd 100644
--- a/apps/experiments/utrecht-theme.css
+++ b/apps/experiments/utrecht-theme.css
@@ -4,10 +4,10 @@
   --utrecht-nav-bar-content-background-color: black;
   --utrecht-nav-bar-content-color: white;
   --utrecht-nav-bar-content-max-inline-size: var(--basis-page-max-inline-size);
-  --utrecht-page-content-content-background-color: white;
-  --utrecht-page-content-content-color: black;
-  --utrecht-page-content-content-max-inline-size: var(--basis-page-max-inline-size);
-  --utrecht-page-content-content-padding-inline: var(--basis-page-padding);
+  --utrecht-page-body-content-background-color: white;
+  --utrecht-page-body-content-color: black;
+  --utrecht-page-body-content-max-inline-size: var(--basis-page-max-inline-size);
+  --utrecht-page-body-content-padding-inline: var(--basis-page-padding);
   --utrecht-page-footer-background-color: hsl(0 100% 40%);
   --utrecht-page-footer-color: white;
   --utrecht-page-footer-content-max-inline-size: var(--basis-page-max-inline-size);
@@ -23,7 +23,7 @@
   --utrecht-root-color: var(--utrecht-color-grey-10);
   --utrecht-page-header-padding-inline: var(--basis-page-padding);
   --utrecht-page-nav-bar-padding-inline: var(--basis-page-padding);
-  --utrecht-page-content-padding-inline: var(--basis-page-padding);
+  --utrecht-page-body-padding-inline: var(--basis-page-padding);
   --utrecht-page-footer-padding-inline: 0;
   --utrecht-root-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
   --utrecht-logo-min-block-size: 58.97px;
diff --git a/apps/experiments/utrecht.html b/apps/experiments/utrecht.html
index 20d0a265fb8..ee47d5f2e30 100644
--- a/apps/experiments/utrecht.html
+++ b/apps/experiments/utrecht.html
@@ -11,8 +11,15 @@
     <link rel="stylesheet" href="rods-theme.css" />
     <link rel="stylesheet" href="slideshow.css" />
     <!-- <link rel="stylesheet" href="dist/theme.css" /> -->
-    <link rel="stylesheet" href="../../components/index.css" />
+    <!-- <link rel="stylesheet" href="../../components/index.css" /> -->
+    <link rel="stylesheet" href="../../components/logo/dist/index.css" />
     <link rel="stylesheet" href="../../components/root/dist/index.css" />
+    <link rel="stylesheet" href="../../components/page-body/dist/index.css" />
+    <link rel="stylesheet" href="../../components/page-header/dist/index.css" />
+    <link rel="stylesheet" href="../../components/page-layout/dist/index.css" />
+    <link rel="stylesheet" href="../../components/page-footer/dist/index.css" />
+    <link rel="stylesheet" href="../../components/nav-bar/dist/index.css" />
+    <link rel="stylesheet" href="../../components/body/dist/index.css" />
     <link rel="stylesheet" href="https://unpkg.com/@amsterdam/design-system-tokens@0.13.0/dist/index.css" />
     <script type="module">
       import { defineCustomElements } from '../../packages/web-component-library-stencil/loader/index.js';
@@ -47,8 +54,8 @@
       <div class="utrecht-nav-bar">
         <div class="utrecht-nav-bar__content">nav bar</div>
       </div>
-      <div class="utrecht-page-content">
-        <div class="utrecht-page-content__content">
+      <div class="utrecht-page-body">
+        <div class="utrecht-page-body__content">
           <div class="utrecht-text-content">
             <div class="utrecht-html">
               <h1>Wij doen mee met NL Design System</h1>

From ce53315165726ce417c6fc270625258a81a2f618 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Thu, 28 Nov 2024 08:36:43 +0100
Subject: [PATCH 2/4] feat: add 4 new web components:
 root/body/page-layout/page-body

---
 .changeset/flat-spoons-remember.md            |   5 +
 .../package.json                              |   5 +
 .../src/components.d.ts                       | 125 ++++++++++++++++++
 .../src/components/body.scss                  |  15 +++
 .../src/components/body.tsx                   |  18 +++
 .../src/components/nav-bar.scss               |  19 +++
 .../src/components/nav-bar.tsx                |  22 +++
 .../src/components/page-body.scss             |  19 +++
 .../src/components/page-body.tsx              |  22 +++
 .../src/components/page-content.scss          |   4 +-
 .../src/components/page-content.tsx           |   8 +-
 .../src/components/page-footer.scss           |   8 +-
 .../src/components/page-footer.tsx            |   2 +-
 .../src/components/page-header.scss           |   8 +-
 .../src/components/page-header.tsx            |   6 +-
 .../src/components/page-layout.scss           |  15 +++
 .../src/components/page-layout.tsx            |  18 +++
 .../src/components/root.scss                  |  15 +++
 .../src/components/root.tsx                   |  19 +++
 pnpm-lock.yaml                                |  15 +++
 20 files changed, 350 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/flat-spoons-remember.md
 create mode 100644 packages/web-component-library-stencil/src/components/body.scss
 create mode 100644 packages/web-component-library-stencil/src/components/body.tsx
 create mode 100644 packages/web-component-library-stencil/src/components/nav-bar.scss
 create mode 100644 packages/web-component-library-stencil/src/components/nav-bar.tsx
 create mode 100644 packages/web-component-library-stencil/src/components/page-body.scss
 create mode 100644 packages/web-component-library-stencil/src/components/page-body.tsx
 create mode 100644 packages/web-component-library-stencil/src/components/page-layout.scss
 create mode 100644 packages/web-component-library-stencil/src/components/page-layout.tsx
 create mode 100644 packages/web-component-library-stencil/src/components/root.scss
 create mode 100644 packages/web-component-library-stencil/src/components/root.tsx

diff --git a/.changeset/flat-spoons-remember.md b/.changeset/flat-spoons-remember.md
new file mode 100644
index 00000000000..ea90486498d
--- /dev/null
+++ b/.changeset/flat-spoons-remember.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/web-component-library-stencil": minor
+---
+
+Add 4 new web components: `<utrecht-root>`, `<utrecht-body>`, `<utrecht-page-layout>`, `<utrecht-nav-bar>`. Support new layout structure in existing components: `<utrecht-page-header>`, `<utrecht-page-footer>` and `<utrecht-page-content>`.
diff --git a/packages/web-component-library-stencil/package.json b/packages/web-component-library-stencil/package.json
index a2aed5a4a84..34ccdae1a83 100644
--- a/packages/web-component-library-stencil/package.json
+++ b/packages/web-component-library-stencil/package.json
@@ -44,6 +44,7 @@
     "@utrecht/badge-list-css": "workspace:*",
     "@utrecht/badge-status-css": "workspace:*",
     "@utrecht/blockquote-css": "workspace:*",
+    "@utrecht/body-css": "workspace:*",
     "@utrecht/breadcrumb-nav-css": "workspace:*",
     "@utrecht/button-css": "workspace:*",
     "@utrecht/button-group-css": "workspace:*",
@@ -87,17 +88,21 @@
     "@utrecht/map-marker-css": "workspace:*",
     "@utrecht/mark-css": "workspace:*",
     "@utrecht/multiline-data-css": "workspace:*",
+    "@utrecht/nav-bar-css": "workspace:*",
     "@utrecht/number-badge-css": "workspace:*",
     "@utrecht/number-data-css": "workspace:*",
     "@utrecht/ordered-list-css": "workspace:*",
     "@utrecht/page-content-css": "workspace:*",
     "@utrecht/page-css": "workspace:*",
+    "@utrecht/page-body-css": "workspace:*",
     "@utrecht/page-footer-css": "workspace:*",
     "@utrecht/page-header-css": "workspace:*",
+    "@utrecht/page-layout-css": "workspace:*",
     "@utrecht/pagination-css": "workspace:*",
     "@utrecht/paragraph-css": "workspace:*",
     "@utrecht/pre-heading-css": "workspace:*",
     "@utrecht/radio-button-css": "workspace:*",
+    "@utrecht/root-css": "workspace:*",
     "@utrecht/select-css": "workspace:*",
     "@utrecht/separator-css": "workspace:*",
     "@utrecht/skip-link-css": "workspace:*",
diff --git a/packages/web-component-library-stencil/src/components.d.ts b/packages/web-component-library-stencil/src/components.d.ts
index fd14be7b157..519545d2b73 100644
--- a/packages/web-component-library-stencil/src/components.d.ts
+++ b/packages/web-component-library-stencil/src/components.d.ts
@@ -26,6 +26,8 @@ export namespace Components {
     interface UtrechtBadgeStatus {
         "status": string;
     }
+    interface UtrechtBody {
+    }
     interface UtrechtBreadcrumbNav {
         "json": string;
         "variant": string;
@@ -639,6 +641,13 @@ export namespace Components {
     }
     interface UtrechtMultilineData {
     }
+    /**
+     * @license EUPL-1.2
+     * Copyright (c) 2020-2024 Frameless B.V.
+     * Copyright (c) 2021-2024 Gemeente Utrecht
+     */
+    interface UtrechtNavBar {
+    }
     interface UtrechtNumberBadge {
         "locale": string;
         "max": number;
@@ -654,6 +663,13 @@ export namespace Components {
      */
     interface UtrechtPage {
     }
+    /**
+     * @license EUPL-1.2
+     * Copyright (c) 2020-2024 Frameless B.V.
+     * Copyright (c) 2021-2024 Gemeente Utrecht
+     */
+    interface UtrechtPageBody {
+    }
     /**
      * @license EUPL-1.2
      * Copyright (c) 2020-2024 Frameless B.V.
@@ -675,6 +691,13 @@ export namespace Components {
      */
     interface UtrechtPageHeader {
     }
+    /**
+     * @license EUPL-1.2
+     * Copyright (c) 2020-2024 Frameless B.V.
+     * Copyright (c) 2021-2024 Gemeente Utrecht
+     */
+    interface UtrechtPageLayout {
+    }
     interface UtrechtPagination {
         "currentIndex": number;
         "links": string;
@@ -702,6 +725,8 @@ export namespace Components {
         "appearance"?: string;
         "checked"?: boolean;
     }
+    interface UtrechtRoot {
+    }
     interface UtrechtSeparator {
     }
     interface UtrechtSidenav {
@@ -835,6 +860,12 @@ declare global {
         prototype: HTMLUtrechtBadgeStatusElement;
         new (): HTMLUtrechtBadgeStatusElement;
     };
+    interface HTMLUtrechtBodyElement extends Components.UtrechtBody, HTMLStencilElement {
+    }
+    var HTMLUtrechtBodyElement: {
+        prototype: HTMLUtrechtBodyElement;
+        new (): HTMLUtrechtBodyElement;
+    };
     interface HTMLUtrechtBreadcrumbNavElement extends Components.UtrechtBreadcrumbNav, HTMLStencilElement {
     }
     var HTMLUtrechtBreadcrumbNavElement: {
@@ -2441,6 +2472,17 @@ declare global {
         prototype: HTMLUtrechtMultilineDataElement;
         new (): HTMLUtrechtMultilineDataElement;
     };
+    /**
+     * @license EUPL-1.2
+     * Copyright (c) 2020-2024 Frameless B.V.
+     * Copyright (c) 2021-2024 Gemeente Utrecht
+     */
+    interface HTMLUtrechtNavBarElement extends Components.UtrechtNavBar, HTMLStencilElement {
+    }
+    var HTMLUtrechtNavBarElement: {
+        prototype: HTMLUtrechtNavBarElement;
+        new (): HTMLUtrechtNavBarElement;
+    };
     interface HTMLUtrechtNumberBadgeElement extends Components.UtrechtNumberBadge, HTMLStencilElement {
     }
     var HTMLUtrechtNumberBadgeElement: {
@@ -2464,6 +2506,17 @@ declare global {
         prototype: HTMLUtrechtPageElement;
         new (): HTMLUtrechtPageElement;
     };
+    /**
+     * @license EUPL-1.2
+     * Copyright (c) 2020-2024 Frameless B.V.
+     * Copyright (c) 2021-2024 Gemeente Utrecht
+     */
+    interface HTMLUtrechtPageBodyElement extends Components.UtrechtPageBody, HTMLStencilElement {
+    }
+    var HTMLUtrechtPageBodyElement: {
+        prototype: HTMLUtrechtPageBodyElement;
+        new (): HTMLUtrechtPageBodyElement;
+    };
     /**
      * @license EUPL-1.2
      * Copyright (c) 2020-2024 Frameless B.V.
@@ -2497,6 +2550,17 @@ declare global {
         prototype: HTMLUtrechtPageHeaderElement;
         new (): HTMLUtrechtPageHeaderElement;
     };
+    /**
+     * @license EUPL-1.2
+     * Copyright (c) 2020-2024 Frameless B.V.
+     * Copyright (c) 2021-2024 Gemeente Utrecht
+     */
+    interface HTMLUtrechtPageLayoutElement extends Components.UtrechtPageLayout, HTMLStencilElement {
+    }
+    var HTMLUtrechtPageLayoutElement: {
+        prototype: HTMLUtrechtPageLayoutElement;
+        new (): HTMLUtrechtPageLayoutElement;
+    };
     interface HTMLUtrechtPaginationElement extends Components.UtrechtPagination, HTMLStencilElement {
     }
     var HTMLUtrechtPaginationElement: {
@@ -2533,6 +2597,12 @@ declare global {
         prototype: HTMLUtrechtProgressSublistItemElement;
         new (): HTMLUtrechtProgressSublistItemElement;
     };
+    interface HTMLUtrechtRootElement extends Components.UtrechtRoot, HTMLStencilElement {
+    }
+    var HTMLUtrechtRootElement: {
+        prototype: HTMLUtrechtRootElement;
+        new (): HTMLUtrechtRootElement;
+    };
     interface HTMLUtrechtSeparatorElement extends Components.UtrechtSeparator, HTMLStencilElement {
     }
     var HTMLUtrechtSeparatorElement: {
@@ -2665,6 +2735,7 @@ declare global {
         "utrecht-badge-data": HTMLUtrechtBadgeDataElement;
         "utrecht-badge-list": HTMLUtrechtBadgeListElement;
         "utrecht-badge-status": HTMLUtrechtBadgeStatusElement;
+        "utrecht-body": HTMLUtrechtBodyElement;
         "utrecht-breadcrumb-nav": HTMLUtrechtBreadcrumbNavElement;
         "utrecht-button": HTMLUtrechtButtonElement;
         "utrecht-button-group": HTMLUtrechtButtonGroupElement;
@@ -2919,18 +2990,22 @@ declare global {
         "utrecht-map-marker": HTMLUtrechtMapMarkerElement;
         "utrecht-mark": HTMLUtrechtMarkElement;
         "utrecht-multiline-data": HTMLUtrechtMultilineDataElement;
+        "utrecht-nav-bar": HTMLUtrechtNavBarElement;
         "utrecht-number-badge": HTMLUtrechtNumberBadgeElement;
         "utrecht-number-data": HTMLUtrechtNumberDataElement;
         "utrecht-page": HTMLUtrechtPageElement;
+        "utrecht-page-body": HTMLUtrechtPageBodyElement;
         "utrecht-page-content": HTMLUtrechtPageContentElement;
         "utrecht-page-footer": HTMLUtrechtPageFooterElement;
         "utrecht-page-header": HTMLUtrechtPageHeaderElement;
+        "utrecht-page-layout": HTMLUtrechtPageLayoutElement;
         "utrecht-pagination": HTMLUtrechtPaginationElement;
         "utrecht-paragraph": HTMLUtrechtParagraphElement;
         "utrecht-pre-heading": HTMLUtrechtPreHeadingElement;
         "utrecht-progress-list": HTMLUtrechtProgressListElement;
         "utrecht-progress-list-item": HTMLUtrechtProgressListItemElement;
         "utrecht-progress-sublist-item": HTMLUtrechtProgressSublistItemElement;
+        "utrecht-root": HTMLUtrechtRootElement;
         "utrecht-separator": HTMLUtrechtSeparatorElement;
         "utrecht-sidenav": HTMLUtrechtSidenavElement;
         "utrecht-skip-link": HTMLUtrechtSkipLinkElement;
@@ -2970,6 +3045,8 @@ declare namespace LocalJSX {
     interface UtrechtBadgeStatus {
         "status"?: string;
     }
+    interface UtrechtBody {
+    }
     interface UtrechtBreadcrumbNav {
         "json"?: string;
         "variant"?: string;
@@ -3603,6 +3680,13 @@ declare namespace LocalJSX {
     }
     interface UtrechtMultilineData {
     }
+    /**
+     * @license EUPL-1.2
+     * Copyright (c) 2020-2024 Frameless B.V.
+     * Copyright (c) 2021-2024 Gemeente Utrecht
+     */
+    interface UtrechtNavBar {
+    }
     interface UtrechtNumberBadge {
         "locale"?: string;
         "max"?: number;
@@ -3618,6 +3702,13 @@ declare namespace LocalJSX {
      */
     interface UtrechtPage {
     }
+    /**
+     * @license EUPL-1.2
+     * Copyright (c) 2020-2024 Frameless B.V.
+     * Copyright (c) 2021-2024 Gemeente Utrecht
+     */
+    interface UtrechtPageBody {
+    }
     /**
      * @license EUPL-1.2
      * Copyright (c) 2020-2024 Frameless B.V.
@@ -3639,6 +3730,13 @@ declare namespace LocalJSX {
      */
     interface UtrechtPageHeader {
     }
+    /**
+     * @license EUPL-1.2
+     * Copyright (c) 2020-2024 Frameless B.V.
+     * Copyright (c) 2021-2024 Gemeente Utrecht
+     */
+    interface UtrechtPageLayout {
+    }
     interface UtrechtPagination {
         "currentIndex"?: number;
         "links"?: string;
@@ -3666,6 +3764,8 @@ declare namespace LocalJSX {
         "appearance"?: string;
         "checked"?: boolean;
     }
+    interface UtrechtRoot {
+    }
     interface UtrechtSeparator {
     }
     interface UtrechtSidenav {
@@ -3739,6 +3839,7 @@ declare namespace LocalJSX {
         "utrecht-badge-data": UtrechtBadgeData;
         "utrecht-badge-list": UtrechtBadgeList;
         "utrecht-badge-status": UtrechtBadgeStatus;
+        "utrecht-body": UtrechtBody;
         "utrecht-breadcrumb-nav": UtrechtBreadcrumbNav;
         "utrecht-button": UtrechtButton;
         "utrecht-button-group": UtrechtButtonGroup;
@@ -3993,18 +4094,22 @@ declare namespace LocalJSX {
         "utrecht-map-marker": UtrechtMapMarker;
         "utrecht-mark": UtrechtMark;
         "utrecht-multiline-data": UtrechtMultilineData;
+        "utrecht-nav-bar": UtrechtNavBar;
         "utrecht-number-badge": UtrechtNumberBadge;
         "utrecht-number-data": UtrechtNumberData;
         "utrecht-page": UtrechtPage;
+        "utrecht-page-body": UtrechtPageBody;
         "utrecht-page-content": UtrechtPageContent;
         "utrecht-page-footer": UtrechtPageFooter;
         "utrecht-page-header": UtrechtPageHeader;
+        "utrecht-page-layout": UtrechtPageLayout;
         "utrecht-pagination": UtrechtPagination;
         "utrecht-paragraph": UtrechtParagraph;
         "utrecht-pre-heading": UtrechtPreHeading;
         "utrecht-progress-list": UtrechtProgressList;
         "utrecht-progress-list-item": UtrechtProgressListItem;
         "utrecht-progress-sublist-item": UtrechtProgressSublistItem;
+        "utrecht-root": UtrechtRoot;
         "utrecht-separator": UtrechtSeparator;
         "utrecht-sidenav": UtrechtSidenav;
         "utrecht-skip-link": UtrechtSkipLink;
@@ -4034,6 +4139,7 @@ declare module "@stencil/core" {
             "utrecht-badge-data": LocalJSX.UtrechtBadgeData & JSXBase.HTMLAttributes<HTMLUtrechtBadgeDataElement>;
             "utrecht-badge-list": LocalJSX.UtrechtBadgeList & JSXBase.HTMLAttributes<HTMLUtrechtBadgeListElement>;
             "utrecht-badge-status": LocalJSX.UtrechtBadgeStatus & JSXBase.HTMLAttributes<HTMLUtrechtBadgeStatusElement>;
+            "utrecht-body": LocalJSX.UtrechtBody & JSXBase.HTMLAttributes<HTMLUtrechtBodyElement>;
             "utrecht-breadcrumb-nav": LocalJSX.UtrechtBreadcrumbNav & JSXBase.HTMLAttributes<HTMLUtrechtBreadcrumbNavElement>;
             "utrecht-button": LocalJSX.UtrechtButton & JSXBase.HTMLAttributes<HTMLUtrechtButtonElement>;
             "utrecht-button-group": LocalJSX.UtrechtButtonGroup & JSXBase.HTMLAttributes<HTMLUtrechtButtonGroupElement>;
@@ -4288,6 +4394,12 @@ declare module "@stencil/core" {
             "utrecht-map-marker": LocalJSX.UtrechtMapMarker & JSXBase.HTMLAttributes<HTMLUtrechtMapMarkerElement>;
             "utrecht-mark": LocalJSX.UtrechtMark & JSXBase.HTMLAttributes<HTMLUtrechtMarkElement>;
             "utrecht-multiline-data": LocalJSX.UtrechtMultilineData & JSXBase.HTMLAttributes<HTMLUtrechtMultilineDataElement>;
+            /**
+             * @license EUPL-1.2
+             * Copyright (c) 2020-2024 Frameless B.V.
+             * Copyright (c) 2021-2024 Gemeente Utrecht
+             */
+            "utrecht-nav-bar": LocalJSX.UtrechtNavBar & JSXBase.HTMLAttributes<HTMLUtrechtNavBarElement>;
             "utrecht-number-badge": LocalJSX.UtrechtNumberBadge & JSXBase.HTMLAttributes<HTMLUtrechtNumberBadgeElement>;
             "utrecht-number-data": LocalJSX.UtrechtNumberData & JSXBase.HTMLAttributes<HTMLUtrechtNumberDataElement>;
             /**
@@ -4296,6 +4408,12 @@ declare module "@stencil/core" {
              * Copyright (c) 2021-2024 Gemeente Utrecht
              */
             "utrecht-page": LocalJSX.UtrechtPage & JSXBase.HTMLAttributes<HTMLUtrechtPageElement>;
+            /**
+             * @license EUPL-1.2
+             * Copyright (c) 2020-2024 Frameless B.V.
+             * Copyright (c) 2021-2024 Gemeente Utrecht
+             */
+            "utrecht-page-body": LocalJSX.UtrechtPageBody & JSXBase.HTMLAttributes<HTMLUtrechtPageBodyElement>;
             /**
              * @license EUPL-1.2
              * Copyright (c) 2020-2024 Frameless B.V.
@@ -4314,12 +4432,19 @@ declare module "@stencil/core" {
              * Copyright (c) 2021-2024 Gemeente Utrecht
              */
             "utrecht-page-header": LocalJSX.UtrechtPageHeader & JSXBase.HTMLAttributes<HTMLUtrechtPageHeaderElement>;
+            /**
+             * @license EUPL-1.2
+             * Copyright (c) 2020-2024 Frameless B.V.
+             * Copyright (c) 2021-2024 Gemeente Utrecht
+             */
+            "utrecht-page-layout": LocalJSX.UtrechtPageLayout & JSXBase.HTMLAttributes<HTMLUtrechtPageLayoutElement>;
             "utrecht-pagination": LocalJSX.UtrechtPagination & JSXBase.HTMLAttributes<HTMLUtrechtPaginationElement>;
             "utrecht-paragraph": LocalJSX.UtrechtParagraph & JSXBase.HTMLAttributes<HTMLUtrechtParagraphElement>;
             "utrecht-pre-heading": LocalJSX.UtrechtPreHeading & JSXBase.HTMLAttributes<HTMLUtrechtPreHeadingElement>;
             "utrecht-progress-list": LocalJSX.UtrechtProgressList & JSXBase.HTMLAttributes<HTMLUtrechtProgressListElement>;
             "utrecht-progress-list-item": LocalJSX.UtrechtProgressListItem & JSXBase.HTMLAttributes<HTMLUtrechtProgressListItemElement>;
             "utrecht-progress-sublist-item": LocalJSX.UtrechtProgressSublistItem & JSXBase.HTMLAttributes<HTMLUtrechtProgressSublistItemElement>;
+            "utrecht-root": LocalJSX.UtrechtRoot & JSXBase.HTMLAttributes<HTMLUtrechtRootElement>;
             "utrecht-separator": LocalJSX.UtrechtSeparator & JSXBase.HTMLAttributes<HTMLUtrechtSeparatorElement>;
             "utrecht-sidenav": LocalJSX.UtrechtSidenav & JSXBase.HTMLAttributes<HTMLUtrechtSidenavElement>;
             "utrecht-skip-link": LocalJSX.UtrechtSkipLink & JSXBase.HTMLAttributes<HTMLUtrechtSkipLinkElement>;
diff --git a/packages/web-component-library-stencil/src/components/body.scss b/packages/web-component-library-stencil/src/components/body.scss
new file mode 100644
index 00000000000..36c3c6324d0
--- /dev/null
+++ b/packages/web-component-library-stencil/src/components/body.scss
@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+@import "~@utrecht/body-css/src/mixin";
+
+:host {
+  @include utrecht-body;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/packages/web-component-library-stencil/src/components/body.tsx b/packages/web-component-library-stencil/src/components/body.tsx
new file mode 100644
index 00000000000..90ae70f594b
--- /dev/null
+++ b/packages/web-component-library-stencil/src/components/body.tsx
@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'utrecht-body',
+  styleUrl: 'body.scss',
+  shadow: true,
+})
+export class Root {
+  render() {
+    return <slot></slot>;
+  }
+}
diff --git a/packages/web-component-library-stencil/src/components/nav-bar.scss b/packages/web-component-library-stencil/src/components/nav-bar.scss
new file mode 100644
index 00000000000..8f3fbe76b99
--- /dev/null
+++ b/packages/web-component-library-stencil/src/components/nav-bar.scss
@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+@import "~@utrecht/nav-bar-css/src/mixin";
+
+:host {
+  @include utrecht-nav-bar;
+}
+
+div {
+  @include utrecht-nav-bar__content;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/packages/web-component-library-stencil/src/components/nav-bar.tsx b/packages/web-component-library-stencil/src/components/nav-bar.tsx
new file mode 100644
index 00000000000..01b63988944
--- /dev/null
+++ b/packages/web-component-library-stencil/src/components/nav-bar.tsx
@@ -0,0 +1,22 @@
+import { Component, h } from '@stencil/core';
+
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+@Component({
+  tag: 'utrecht-nav-bar',
+  styleUrl: 'nav-bar.scss',
+  shadow: true,
+})
+export class NavBar {
+  render() {
+    return (
+      <div>
+        <slot></slot>
+      </div>
+    );
+  }
+}
diff --git a/packages/web-component-library-stencil/src/components/page-body.scss b/packages/web-component-library-stencil/src/components/page-body.scss
new file mode 100644
index 00000000000..3917994d24e
--- /dev/null
+++ b/packages/web-component-library-stencil/src/components/page-body.scss
@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+@import "~@utrecht/page-body-css/src/mixin";
+
+:host {
+  @include utrecht-page-body;
+}
+
+div {
+  @include utrecht-page-body__content;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/packages/web-component-library-stencil/src/components/page-body.tsx b/packages/web-component-library-stencil/src/components/page-body.tsx
new file mode 100644
index 00000000000..7cac8543e6b
--- /dev/null
+++ b/packages/web-component-library-stencil/src/components/page-body.tsx
@@ -0,0 +1,22 @@
+import { Component, h } from '@stencil/core';
+
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+@Component({
+  tag: 'utrecht-page-body',
+  styleUrl: 'page-body.scss',
+  shadow: true,
+})
+export class PageBody {
+  render() {
+    return (
+      <div>
+        <slot></slot>
+      </div>
+    );
+  }
+}
diff --git a/packages/web-component-library-stencil/src/components/page-content.scss b/packages/web-component-library-stencil/src/components/page-content.scss
index 0abbdb8e803..949d0bc51d6 100644
--- a/packages/web-component-library-stencil/src/components/page-content.scss
+++ b/packages/web-component-library-stencil/src/components/page-content.scss
@@ -4,10 +4,10 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-@import "~@utrecht/page-content-css/src";
+@import "~@utrecht/page-content-css/src/mixin";
 
 :host {
-  display: block;
+  @include utrecht-page-content;
 }
 
 :host([hidden]) {
diff --git a/packages/web-component-library-stencil/src/components/page-content.tsx b/packages/web-component-library-stencil/src/components/page-content.tsx
index 3c934c84f62..279f9c69b4a 100644
--- a/packages/web-component-library-stencil/src/components/page-content.tsx
+++ b/packages/web-component-library-stencil/src/components/page-content.tsx
@@ -13,12 +13,6 @@ import { Component, h } from '@stencil/core';
 })
 export class Page {
   render() {
-    return (
-      <div class="utrecht-page-content">
-        <main class="utrecht-page-content__main">
-          <slot></slot>
-        </main>
-      </div>
-    );
+    return <slot></slot>;
   }
 }
diff --git a/packages/web-component-library-stencil/src/components/page-footer.scss b/packages/web-component-library-stencil/src/components/page-footer.scss
index 0ed5996297e..597fc176c2e 100644
--- a/packages/web-component-library-stencil/src/components/page-footer.scss
+++ b/packages/web-component-library-stencil/src/components/page-footer.scss
@@ -4,10 +4,14 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-@import "~@utrecht/page-footer-css/src";
+@import "~@utrecht/page-footer-css/src/mixin";
 
 :host {
-  display: block;
+  @include utrecht-page-footer;
+}
+
+footer {
+  @include utrecht-page-footer__content;
 }
 
 :host([hidden]) {
diff --git a/packages/web-component-library-stencil/src/components/page-footer.tsx b/packages/web-component-library-stencil/src/components/page-footer.tsx
index 0ab3947e40a..24499cf970a 100644
--- a/packages/web-component-library-stencil/src/components/page-footer.tsx
+++ b/packages/web-component-library-stencil/src/components/page-footer.tsx
@@ -14,7 +14,7 @@ import { Component, h } from '@stencil/core';
 export class PageFooter {
   render() {
     return (
-      <footer class="utrecht-page-footer">
+      <footer>
         <slot></slot>
       </footer>
     );
diff --git a/packages/web-component-library-stencil/src/components/page-header.scss b/packages/web-component-library-stencil/src/components/page-header.scss
index ec618840e6c..07d8ecd0704 100644
--- a/packages/web-component-library-stencil/src/components/page-header.scss
+++ b/packages/web-component-library-stencil/src/components/page-header.scss
@@ -4,10 +4,14 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 
-@import "~@utrecht/page-header-css/src";
+@import "~@utrecht/page-header-css/src/mixin";
 
 :host {
-  display: block;
+  @include utrecht-page-header;
+}
+
+header {
+  @include utrecht-page-header__content;
 }
 
 :host([hidden]) {
diff --git a/packages/web-component-library-stencil/src/components/page-header.tsx b/packages/web-component-library-stencil/src/components/page-header.tsx
index 54ad16ea3db..83d6d80014e 100644
--- a/packages/web-component-library-stencil/src/components/page-header.tsx
+++ b/packages/web-component-library-stencil/src/components/page-header.tsx
@@ -14,10 +14,8 @@ import { Component, h } from '@stencil/core';
 export class PageHeader {
   render() {
     return (
-      <header class="utrecht-page-header">
-        <div class="utrecht-page-header__content">
-          <slot></slot>
-        </div>
+      <header>
+        <slot></slot>
       </header>
     );
   }
diff --git a/packages/web-component-library-stencil/src/components/page-layout.scss b/packages/web-component-library-stencil/src/components/page-layout.scss
new file mode 100644
index 00000000000..19370058831
--- /dev/null
+++ b/packages/web-component-library-stencil/src/components/page-layout.scss
@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+@import "~@utrecht/page-layout-css/src/mixin";
+
+:host {
+  @include utrecht-page-layout;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/packages/web-component-library-stencil/src/components/page-layout.tsx b/packages/web-component-library-stencil/src/components/page-layout.tsx
new file mode 100644
index 00000000000..3f80238dcc3
--- /dev/null
+++ b/packages/web-component-library-stencil/src/components/page-layout.tsx
@@ -0,0 +1,18 @@
+import { Component, h } from '@stencil/core';
+
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+@Component({
+  tag: 'utrecht-page-layout',
+  styleUrl: 'page-layout.scss',
+  shadow: true,
+})
+export class PageLayout {
+  render() {
+    return <slot></slot>;
+  }
+}
diff --git a/packages/web-component-library-stencil/src/components/root.scss b/packages/web-component-library-stencil/src/components/root.scss
new file mode 100644
index 00000000000..52661b8bd58
--- /dev/null
+++ b/packages/web-component-library-stencil/src/components/root.scss
@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+@import "~@utrecht/root-css/src/mixin";
+
+:host {
+  @include utrecht-root;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
diff --git a/packages/web-component-library-stencil/src/components/root.tsx b/packages/web-component-library-stencil/src/components/root.tsx
new file mode 100644
index 00000000000..47f52c5a7e5
--- /dev/null
+++ b/packages/web-component-library-stencil/src/components/root.tsx
@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
+ */
+
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'utrecht-root',
+  styleUrl: 'root.scss',
+  // No shadow DOM, to affect the `<html>` and `<body>` element
+  shadow: true,
+})
+export class Root {
+  render() {
+    return <slot></slot>;
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fc45a134e26..c76ea20b98c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6349,6 +6349,9 @@ importers:
       '@utrecht/blockquote-css':
         specifier: workspace:*
         version: link:../../components/blockquote
+      '@utrecht/body-css':
+        specifier: workspace:*
+        version: link:../../components/body
       '@utrecht/breadcrumb-nav-css':
         specifier: workspace:*
         version: link:../../components/breadcrumb-nav
@@ -6478,6 +6481,9 @@ importers:
       '@utrecht/multiline-data-css':
         specifier: workspace:*
         version: link:../../components/multiline-data
+      '@utrecht/nav-bar-css':
+        specifier: workspace:*
+        version: link:../../components/nav-bar
       '@utrecht/number-badge-css':
         specifier: workspace:*
         version: link:../../components/number-badge
@@ -6487,6 +6493,9 @@ importers:
       '@utrecht/ordered-list-css':
         specifier: workspace:*
         version: link:../../components/ordered-list
+      '@utrecht/page-body-css':
+        specifier: workspace:*
+        version: link:../../components/page-body
       '@utrecht/page-content-css':
         specifier: workspace:*
         version: link:../../components/page-content
@@ -6499,6 +6508,9 @@ importers:
       '@utrecht/page-header-css':
         specifier: workspace:*
         version: link:../../components/page-header
+      '@utrecht/page-layout-css':
+        specifier: workspace:*
+        version: link:../../components/page-layout
       '@utrecht/pagination-css':
         specifier: workspace:*
         version: link:../../components/pagination
@@ -6511,6 +6523,9 @@ importers:
       '@utrecht/radio-button-css':
         specifier: workspace:*
         version: link:../../components/radio-button
+      '@utrecht/root-css':
+        specifier: workspace:*
+        version: link:../../components/root
       '@utrecht/select-css':
         specifier: workspace:*
         version: link:../../components/select

From bfd688686f0379b5524784618fa369b54cabd56b Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Thu, 28 Nov 2024 08:38:56 +0100
Subject: [PATCH 3/4] feat: add styling for `body`, `nav-bar`, `page-body`,
 `page-footer`, `page-header` and `root`

---
 .changeset/fair-impalas-sort.md                 |  5 +++++
 .../src/component/utrecht/body.tokens.json      |  8 ++++++++
 .../src/component/utrecht/nav-bar.tokens.json   |  2 --
 .../src/component/utrecht/page-body.tokens.json | 17 +++++++++++++++++
 .../component/utrecht/page-footer.tokens.json   |  1 +
 .../component/utrecht/page-header.tokens.json   | 15 +++++++++++----
 .../src/component/utrecht/root.tokens.json      |  8 ++++++++
 7 files changed, 50 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/fair-impalas-sort.md
 create mode 100644 proprietary/design-tokens/src/component/utrecht/body.tokens.json
 create mode 100644 proprietary/design-tokens/src/component/utrecht/page-body.tokens.json
 create mode 100644 proprietary/design-tokens/src/component/utrecht/root.tokens.json

diff --git a/.changeset/fair-impalas-sort.md b/.changeset/fair-impalas-sort.md
new file mode 100644
index 00000000000..e3b3b3a1c9d
--- /dev/null
+++ b/.changeset/fair-impalas-sort.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/design-tokens": minor
+---
+
+Add design tokens for `body`, `nav-bar`, `page-body`, `page-footer`, `page-header` and `root`.
diff --git a/proprietary/design-tokens/src/component/utrecht/body.tokens.json b/proprietary/design-tokens/src/component/utrecht/body.tokens.json
new file mode 100644
index 00000000000..8fe5862a140
--- /dev/null
+++ b/proprietary/design-tokens/src/component/utrecht/body.tokens.json
@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "body": {
+      "background-color": { "value": "{utrecht.color.white}" },
+      "color": { "value": "{utrecht.color.black}" }
+    }
+  }
+}
diff --git a/proprietary/design-tokens/src/component/utrecht/nav-bar.tokens.json b/proprietary/design-tokens/src/component/utrecht/nav-bar.tokens.json
index 863212ee8c2..9b4795d5de2 100644
--- a/proprietary/design-tokens/src/component/utrecht/nav-bar.tokens.json
+++ b/proprietary/design-tokens/src/component/utrecht/nav-bar.tokens.json
@@ -1,8 +1,6 @@
 {
   "utrecht": {
     "nav-bar": {
-      "background-color": { "value": "{utrecht.color.white}" },
-      "color": { "value": "{utrecht.color.black}" },
       "content": {
         "max-inline-size": { "value": "{utrecht.page.max-inline-size}" }
       },
diff --git a/proprietary/design-tokens/src/component/utrecht/page-body.tokens.json b/proprietary/design-tokens/src/component/utrecht/page-body.tokens.json
new file mode 100644
index 00000000000..c77e7bb6901
--- /dev/null
+++ b/proprietary/design-tokens/src/component/utrecht/page-body.tokens.json
@@ -0,0 +1,17 @@
+{
+  "utrecht": {
+    "page-body": {
+      "padding-inline-end": { "value": "0" },
+      "padding-inline-start": { "value": "0" },
+      "padding-block-end": { "value": "0" },
+      "padding-block-start": { "value": "0" },
+      "content": {
+        "max-inline-size": { "value": "1184px" },
+        "padding-inline-end": { "value": "2.4em" },
+        "padding-inline-start": { "value": "2em" },
+        "padding-block-end": { "value": "1em" },
+        "padding-block-start": { "value": "0" }
+      }
+    }
+  }
+}
diff --git a/proprietary/design-tokens/src/component/utrecht/page-footer.tokens.json b/proprietary/design-tokens/src/component/utrecht/page-footer.tokens.json
index bfe45d1c92e..09c74854d63 100644
--- a/proprietary/design-tokens/src/component/utrecht/page-footer.tokens.json
+++ b/proprietary/design-tokens/src/component/utrecht/page-footer.tokens.json
@@ -6,6 +6,7 @@
       "background-image": {
         "value": "linear-gradient(45deg, {utrecht.color.red.40}, {utrecht.color.red.40} 50%, #d63433 50%);"
       },
+      "max-inline-size": { "value": "1184px" },
       "padding-inline-end": { "value": "{utrecht.space.inline.2xl}" },
       "padding-inline-start": { "value": "{utrecht.space.inline.2xl}" },
       "padding-block-end": { "value": "{utrecht.space.block.3xl}" },
diff --git a/proprietary/design-tokens/src/component/utrecht/page-header.tokens.json b/proprietary/design-tokens/src/component/utrecht/page-header.tokens.json
index 6eee5dbc716..11f2cd9124c 100644
--- a/proprietary/design-tokens/src/component/utrecht/page-header.tokens.json
+++ b/proprietary/design-tokens/src/component/utrecht/page-header.tokens.json
@@ -1,10 +1,17 @@
 {
   "utrecht": {
     "page-header": {
-      "padding-inline-end": { "value": "2.4em" },
-      "padding-inline-start": { "value": "2em" },
-      "padding-block-end": { "value": "1em" },
-      "padding-block-start": { "value": "1.8em" }
+      "padding-inline-end": { "value": "0" },
+      "padding-inline-start": { "value": "0" },
+      "padding-block-end": { "value": "0" },
+      "padding-block-start": { "value": "0" },
+      "content": {
+        "max-inline-size": { "value": "1184px" },
+        "padding-inline-end": { "value": "2.4em" },
+        "padding-inline-start": { "value": "2em" },
+        "padding-block-end": { "value": "1em" },
+        "padding-block-start": { "value": "1.8em" }
+      }
     }
   }
 }
diff --git a/proprietary/design-tokens/src/component/utrecht/root.tokens.json b/proprietary/design-tokens/src/component/utrecht/root.tokens.json
new file mode 100644
index 00000000000..9f042285739
--- /dev/null
+++ b/proprietary/design-tokens/src/component/utrecht/root.tokens.json
@@ -0,0 +1,8 @@
+{
+  "utrecht": {
+    "root": {
+      "background-color": { "value": "{utrecht.color.grey.95}" },
+      "color": { "value": "{utrecht.color.grey.10}" }
+    }
+  }
+}

From ad96a1384c5f1fddfd3e029b1146d1748d1034e3 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Thu, 28 Nov 2024 08:42:32 +0100
Subject: [PATCH 4/4] fixup! feat: page structure experiments

---
 apps/experiments/web-components.html | 348 +++++++++++++++++++++++++++
 1 file changed, 348 insertions(+)
 create mode 100644 apps/experiments/web-components.html

diff --git a/apps/experiments/web-components.html b/apps/experiments/web-components.html
new file mode 100644
index 00000000000..55da5830833
--- /dev/null
+++ b/apps/experiments/web-components.html
@@ -0,0 +1,348 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" class="utrecht-root utrecht-theme theme-container">
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="utrecht-theme.css" />
+    <link rel="stylesheet" href="purmerend-theme.css" />
+    <link rel="stylesheet" href="amsterdam-theme.css" />
+    <link rel="stylesheet" href="rijkshuisstijl-theme.css" />
+    <link rel="stylesheet" href="rods-theme.css" />
+    <link rel="stylesheet" href="slideshow.css" />
+    <!-- <link rel="stylesheet" href="dist/theme.css" /> -->
+    <link rel="stylesheet" href="../../components/index.css" />
+    <link rel="stylesheet" href="../../components/root/dist/index.css" />
+    <link rel="stylesheet" href="../../components/body/dist/index.css" />
+    <link rel="stylesheet" href="../../proprietary/design-tokens/dist/theme.css" />
+    <link rel="stylesheet" href="https://unpkg.com/@amsterdam/design-system-tokens@0.13.0/dist/index.css" />
+    <script type="module">
+      import { defineCustomElements } from '../../packages/web-component-library-stencil/loader/index.js';
+      defineCustomElements();
+    </script>
+  </head>
+  <body class="utrecht-body">
+    <utrecht-page-layout>
+      <utrecht-page-header>
+        <utrecht-logo>
+          <div class="example-image-slides">
+            <div class="example-image-slides__slide utrecht-logo-image">
+              <img src="utrecht-logo.svg" />
+            </div>
+            <div class="example-image-slides__slide purmerend-logo-image">
+              <img src="purmerend-logo.svg" />
+            </div>
+            <div class="example-image-slides__slide ams-logo-image">
+              <img src="ams-logo.svg" />
+            </div>
+            <div class="example-image-slides__slide rods-logo-image">
+              <img src="rods-logo.svg" />
+            </div>
+            <div class="example-image-slides__slide rijkshuisstijl-logo-image">
+              <img src="rijkshuisstijl-logo.svg" />
+            </div>
+          </div>
+        </utrecht-logo>
+      </utrecht-page-header>
+      <utrecht-nav-bar>nav bar</utrecht-nav-bar>
+      <utrecht-page-body>
+        <div class="utrecht-text-content">
+          <utrecht-html>
+            <h1>Wij doen mee met NL Design System</h1>
+            <p>
+              Met een actieve community van specialisten verzamelen we de beste richtlijnen, componenten en voorbeelden
+              om robuuste websites en webapplicaties voor de digitale overheid te bouwen.
+            </p>
+            <p>
+              NL Design System helpt om toegankelijk, inclusief en gebruiksvriendelijk ontwikkelen makkelijk te maken.
+            </p>
+
+            <ul>
+              <li>Gebouwd en gebruikt door de community (voor en door de overheid).</li>
+              <li>Platformonafhankelijk en voor iedere huisstijl.</li>
+              <li>Uitbreidbaar en publiek beschikbaar.</li>
+              <li>Lees de NL Design System introductie</li>
+            </ul>
+            <details>
+              <summary>Lorem ipsum in al zijn glorie</summary>
+              <utrecht-column-layout>
+                <div>
+                  <p>
+                    Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut
+                    doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci
+                    quisquam dolor et.
+                  </p>
+                  <p>
+                    Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati
+                    quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non
+                    quae. Exercitationem et voluptas excepturi odit sed ut ratione.
+                  </p>
+                  <p>
+                    Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at
+                    harum alias hic voluptatibus laborum ratione.
+                  </p>
+                  <p>
+                    Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure
+                    rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias.
+                  </p>
+                  <p>
+                    Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo
+                    fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt
+                    est optio. Ut cumque numquam mollitia quia ullam alias.
+                  </p>
+                  <p>
+                    Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut
+                    doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci
+                    quisquam dolor et.
+                  </p>
+                  <p>
+                    Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati
+                    quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non
+                    quae. Exercitationem et voluptas excepturi odit sed ut ratione.
+                  </p>
+                  <p>
+                    Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at
+                    harum alias hic voluptatibus laborum ratione.
+                  </p>
+                  <p>
+                    Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure
+                    rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias.
+                  </p>
+                  <p>
+                    Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo
+                    fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt
+                    est optio. Ut cumque numquam mollitia quia ullam alias.
+                  </p>
+                  <p>
+                    Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut
+                    doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci
+                    quisquam dolor et.
+                  </p>
+                  <p>
+                    Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati
+                    quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non
+                    quae. Exercitationem et voluptas excepturi odit sed ut ratione.
+                  </p>
+                  <p>
+                    Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at
+                    harum alias hic voluptatibus laborum ratione.
+                  </p>
+                  <p>
+                    Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure
+                    rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias.
+                  </p>
+                  <p>
+                    Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo
+                    fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt
+                    est optio. Ut cumque numquam mollitia quia ullam alias.
+                  </p>
+                  <p>
+                    Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut
+                    doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci
+                    quisquam dolor et.
+                  </p>
+                  <p>
+                    Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati
+                    quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non
+                    quae. Exercitationem et voluptas excepturi odit sed ut ratione.
+                  </p>
+                  <p>
+                    Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at
+                    harum alias hic voluptatibus laborum ratione.
+                  </p>
+                  <p>
+                    Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure
+                    rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias.
+                  </p>
+                  <p>
+                    Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo
+                    fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt
+                    est optio. Ut cumque numquam mollitia quia ullam alias.
+                  </p>
+                  <p>
+                    Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut
+                    doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci
+                    quisquam dolor et.
+                  </p>
+                  <p>
+                    Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati
+                    quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non
+                    quae. Exercitationem et voluptas excepturi odit sed ut ratione.
+                  </p>
+                  <p>
+                    Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at
+                    harum alias hic voluptatibus laborum ratione.
+                  </p>
+                  <p>
+                    Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure
+                    rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias.
+                  </p>
+                  <p>
+                    Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo
+                    fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt
+                    est optio. Ut cumque numquam mollitia quia ullam alias.
+                  </p>
+                  <p>
+                    Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut
+                    doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci
+                    quisquam dolor et.
+                  </p>
+                  <p>
+                    Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati
+                    quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non
+                    quae. Exercitationem et voluptas excepturi odit sed ut ratione.
+                  </p>
+                  <p>
+                    Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at
+                    harum alias hic voluptatibus laborum ratione.
+                  </p>
+                  <p>
+                    Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure
+                    rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias.
+                  </p>
+                  <p>
+                    Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo
+                    fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt
+                    est optio. Ut cumque numquam mollitia quia ullam alias.
+                  </p>
+                  <p>
+                    Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut
+                    doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci
+                    quisquam dolor et.
+                  </p>
+                  <p>
+                    Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati
+                    quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non
+                    quae. Exercitationem et voluptas excepturi odit sed ut ratione.
+                  </p>
+                  <p>
+                    Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at
+                    harum alias hic voluptatibus laborum ratione.
+                  </p>
+                  <p>
+                    Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure
+                    rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias.
+                  </p>
+                  <p>
+                    Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo
+                    fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt
+                    est optio. Ut cumque numquam mollitia quia ullam alias.
+                  </p>
+                  <p>
+                    Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut
+                    doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci
+                    quisquam dolor et.
+                  </p>
+                  <p>
+                    Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati
+                    quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non
+                    quae. Exercitationem et voluptas excepturi odit sed ut ratione.
+                  </p>
+                  <p>
+                    Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at
+                    harum alias hic voluptatibus laborum ratione.
+                  </p>
+                  <p>
+                    Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure
+                    rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias.
+                  </p>
+                  <p>
+                    Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo
+                    fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt
+                    est optio. Ut cumque numquam mollitia quia ullam alias.
+                  </p>
+                  <p>
+                    Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut
+                    doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci
+                    quisquam dolor et.
+                  </p>
+                  <p>
+                    Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati
+                    quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non
+                    quae. Exercitationem et voluptas excepturi odit sed ut ratione.
+                  </p>
+                  <p>
+                    Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at
+                    harum alias hic voluptatibus laborum ratione.
+                  </p>
+                  <p>
+                    Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure
+                    rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias.
+                  </p>
+                  <p>
+                    Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo
+                    fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt
+                    est optio. Ut cumque numquam mollitia quia ullam alias.
+                  </p>
+                  <p>
+                    Nulla nulla quis qui cum nisi eum. Exercitationem laudantium dolores magnam unde sapiente. Et ut
+                    doloremque omnis eos impedit inventore dignissimos excepturi. Ut nihil deleniti non aut adipisci
+                    quisquam dolor et.
+                  </p>
+                  <p>
+                    Earum est neque doloremque eveniet et ipsum. Quia autem et laudantium nihil saepe sunt. Occaecati
+                    quia assumenda nostrum eligendi qui suscipit voluptatum magni. Rerum doloremque exercitationem non
+                    quae. Exercitationem et voluptas excepturi odit sed ut ratione.
+                  </p>
+                  <p>
+                    Et excepturi illum nisi. Officia harum rerum distinctio qui dolorem sequi quaerat dicta. Sunt at
+                    harum alias hic voluptatibus laborum ratione.
+                  </p>
+                  <p>
+                    Ut ipsam corporis aut reprehenderit voluptas. Commodi ex quisquam illum maiores recusandae. Iure
+                    rerum omnis eum. Excepturi in et impedit perferendis. Et aut sed nihil nulla nam in molestias.
+                  </p>
+                  <p>
+                    Nam eligendi sunt necessitatibus sed totam et. Aperiam maxime magni assumenda et incidunt explicabo
+                    fugit aut. Ipsa consequatur distinctio eaque vitae. Quo laudantium quis sed itaque velit nesciunt
+                    est optio. Ut cumque numquam mollitia quia ullam alias.
+                  </p>
+                </div></utrecht-column-layout
+              >
+            </details>
+          </utrecht-html>
+        </div></utrecht-page-body
+      >
+      <utrecht-page-footer>
+        <utrecht-column-layout>
+          <!--
+        <ul class="utrecht-link-list">
+          <li class="utrecht-link-list__item">
+            <a href="utrecht.html?theme=utrecht-theme">Utrecht</a>
+          </li>
+          <li class="utrecht-link-list__item">
+            <a href="utrecht.html?theme=purmerend-theme">Purmerend</a>
+          </li>
+        </ul>
+        -->
+          <utrecht-button-group>
+            <button type="button" rel="theme" onclick="setTheme('purmerend-theme',this )">
+              Purmerend <utrecht-code>⌥1</utrecht-code>
+            </button>
+            <button type="button" rel="theme" onclick="setTheme('utrecht-theme',this )">
+              Utrecht <utrecht-code>⌥2</utrecht-code>
+            </button>
+            <button type="button" rel="theme" onclick="setTheme('ams-theme',this )">
+              Amsterdam <utrecht-code>⌥3</utrecht-code>
+            </button>
+            <button type="button" rel="theme" onclick="setTheme('rijkshuisstijl-theme',this )">
+              Rijkshuisstijl <utrecht-code>⌥4</utrecht-code>
+            </button>
+            <button type="button" rel="theme" onclick="setTheme('rods-theme',this )">
+              Rotterdam <utrecht-code>⌥5</utrecht-code>
+            </button>
+            <utrecht-button onclick="setTheme('utrecht-theme',this)">Utrecht</utrecht-button>
+            <utrecht-button onclick="document.getElementById('drawer').showModal()"
+              >Open drawer</utrecht-button
+            ></utrecht-button-group
+          ></utrecht-column-layout
+        >
+      </utrecht-page-footer>
+    </utrecht-page-layout>
+    <script src="theme.mjs" type="module"></script>
+    <style>
+      --utrecht-logo-min-inline-size: var(--utrecht-logo-max-inline-size);
+      --utrecht-logo-min-block-size: var(--utrecht-logo-max-block-size);
+    </style>
+  </body>
+</html>