From c3e52766c6ea3b7d7f2f170219c8820fa8641354 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Thu, 28 Nov 2024 13:52:41 +0100
Subject: [PATCH 1/4] Feat(web): Allow Full Width Demo

---
 apps/demo/partials/web/layout/default.hbs | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/demo/partials/web/layout/default.hbs b/apps/demo/partials/web/layout/default.hbs
index 27b9ff1bcf..2495009442 100644
--- a/apps/demo/partials/web/layout/default.hbs
+++ b/apps/demo/partials/web/layout/default.hbs
@@ -4,11 +4,17 @@
   {{> cover}}
 
   <main class="py-1000">
-    <div class="Container">
+
+    {{#unless isFullWidth}}
+      <div class="Container">
+    {{/unless}}
 
       {{> @partial-block}}
 
-    </div>
+    {{#unless isFullWidth}}
+      </div>
+    {{/unless}}
+
   </main>
 
   {{> footer}}

From e67cd6c96d7fd2989cc79a77558a73ff01e856d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Thu, 28 Nov 2024 13:53:04 +0100
Subject: [PATCH 2/4] Feat(web): Introduce UNSTABLE Header

---
 .../scss/components/UNSTABLE_Header/README.md | 500 ++++++++++++++++++
 .../UNSTABLE_Header/_UNSTABLE_Header.scss     |  23 +
 .../components/UNSTABLE_Header/_theme.scss    |   9 +
 .../components/UNSTABLE_Header/_tools.scss    |  59 +++
 .../components/UNSTABLE_Header/index.html     | 218 ++++++++
 .../components/UNSTABLE_Header/index.scss     |   2 +
 packages/web/src/scss/components/index.scss   |   1 +
 7 files changed, 812 insertions(+)
 create mode 100644 packages/web/src/scss/components/UNSTABLE_Header/README.md
 create mode 100644 packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_Header.scss
 create mode 100644 packages/web/src/scss/components/UNSTABLE_Header/_theme.scss
 create mode 100644 packages/web/src/scss/components/UNSTABLE_Header/_tools.scss
 create mode 100644 packages/web/src/scss/components/UNSTABLE_Header/index.html
 create mode 100644 packages/web/src/scss/components/UNSTABLE_Header/index.scss

diff --git a/packages/web/src/scss/components/UNSTABLE_Header/README.md b/packages/web/src/scss/components/UNSTABLE_Header/README.md
new file mode 100644
index 0000000000..14dd360b28
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_Header/README.md
@@ -0,0 +1,500 @@
+# Header
+
+The Header is a highly variable and customizable component. It comes in several
+design variants and provides a handful of building blocks you can use to achieve
+your specific design goals.
+
+The Header is a composition of several subcomponents:
+
+- [Header](#minimal-header)
+  - [HeaderMobileActions](#mobile-only-actions)
+  - [HeaderDesktopActions](#desktop-only-actions)
+    - [HeaderNav](#navigation)
+      - [HeaderNavItem](#navigation)
+        - [HeaderLink](#navigation)
+- [HeaderDialog](#header-dialog)
+  - [HeaderDialogCloseButton](#close-button)
+  - [HeaderDialogActions](#primary-and-secondary-actions)
+    - [HeaderDialogNav](#navigation-1)
+      - [HeaderDialogNavItem](#navigation-1)
+        - [HeaderDialogLink](#navigation-1)
+        - [HeaderDialogText](#navigation-1)
+
+## JavaScript Plugin
+
+For full functionality, you need to provide Spirit JavaScript, which will handle
+toggling of the Header component:
+
+```html
+<script src="node_modules/@lmc-eu/spirit-web/js/cjs/spirit-web.min.js" async></script>
+```
+
+Please consult the [main README][web-readme] for how to include JavaScript
+plugins.
+
+Or, feel free to write the controlling script yourself.
+
+The HeaderDialog uses the Offcanvas JS Plugin to toggle the dialog.
+See [Offcanvas documentation][offcanvas-docs] for more details.
+
+## Accessibility Guidelines
+
+- Ensure accessibility by using a `<nav>` element or, if using a more generic
+  element such as a `<div>`, add a `role="navigation"` to every navigation to
+  explicitly identify it as a landmark region for users of assistive
+  technologies.
+- Indicate the current item by using `aria-current="page"` for the current
+  page or `aria-current="true"` for the current item in a set.
+- Don't forget to provide textual equivalents for icon buttons. Use either the
+  `aria-label` attribute, or the provided `accessibility-hidden` helper class.
+- For Header to work correctly with assistive technologies, the `aria-expanded`
+  attributes need to be updated by JavaScript when Header is toggled.
+
+👉 The animation effect of this component is dependent on the
+`prefers-reduced-motion` media query.
+
+🌍 Although we don't need it yet, this component experimentally supports RTL
+languages (because just a single line had to be added to make it all work 🎉).
+
+## Minimal Header
+
+Without any modifier, Header is ready to contain necessary blocks in a classic
+left-to-right layout (in LTR documents). Please note it is fully transparent
+unless you add a color variant modifier class.
+
+```html
+<header class="Header">
+  <a href="#" aria-label="Company homepage">
+    <img src="…" alt="Company" />
+  </a>
+</header>
+```
+
+## Color Variants
+
+Currently, Header comes in two color variants: **primary** and **transparent**
+(for non-solid backgrounds like gradients or images). Add `Header--transparent`
+modifier class to apply transparent background color to Header.
+
+```html
+<header class="Header Header--transparent">
+  <a href="#" aria-label="Company homepage">
+    <img src="…" alt="Company" />
+  </a>
+</header>
+```
+
+## Simple Header
+
+The `Header--simple` modifier makes the header bar slightly shorter and aligns
+its content to the center. Use this design variant when all you need on the page
+is just branding.
+
+```html
+<header class="Header Header--simple">
+  <a href="#" aria-label="Company homepage">
+    <img src="…" alt="Company" />
+  </a>
+</header>
+```
+
+## Supported Content
+
+To create a responsive header with top-level navigation, there are the following
+building blocks to use:
+
+1. Inside Header:
+   1. mobile-only actions, including toggle button by default,
+   2. desktop-only actions with primary and secondary action slots.
+2. Inside Header Dialog:
+   1. primary actions slot (all breakpoints),
+   2. secondary actions slot (all breakpoints).
+
+## Header Component
+
+### Mobile-Only Actions
+
+Slot for actions that are intended to display on mobile and tablet screens only.
+It is designed to hold the toggle button (see below) but you can add as many
+custom elements as the free space in Header allows.
+
+```html
+<div class="HeaderMobileActions">
+  <!-- Mobile-only actions -->
+</div>
+```
+
+#### Toggle Button
+
+Toggle button reveals the [Header Dialog](#header-dialog) containing actions for
+small screens (up to the desktop breakpoint). It makes use of a secondary Button
+by default.
+
+The toggle button implements Spirit's Off-canvas JavaScript plugin. It is linked
+to the corresponding instance of Header Dialog via ID placed in `data-spirit-target`
+and `aria-controls` attributes.
+
+```html
+<button
+  type="button"
+  class="Button Button--secondary Button--medium"
+  data-spirit-toggle="offcanvas"
+  data-spirit-target="#my-header-dialog"
+  aria-controls="my-header-dialog"
+  aria-expanded="false"
+>
+  <svg width="24" height="24" aria-hidden="true">
+    <use xlink:href="/icons/svg/sprite.svg#hamburger" />
+  </svg>
+  <span class="accessibility-hidden">Menu</span>
+</button>
+```
+
+### Desktop-Only Actions
+
+As the name suggests, desktop-only actions are intended to display on desktop screens only. They generally work as flex
+containers that define vertical alignment and spacing.
+
+If you need to align actions to the end of the Header, use the `HeaderDesktopActions--end` modifier class.
+
+👉 It is critical to **make sure all your actions fit the Header on the
+desktop breakpoint**. Spirit intentionally does not provide any overflow
+control here.
+
+```html
+<nav class="HeaderDesktopActions" aria-label="Main navigation">
+  <!-- Desktop-only actions -->
+</nav>
+<nav class="HeaderDesktopActions HeaderDesktopActions--end">
+  <!-- Desktop-only actions aligned to the end -->
+</nav>
+```
+
+<!--lint disable no-duplicate-headings -->
+
+#### Desktop-Only Actions Navigation
+
+<!--lint enable no-duplicate-headings -->
+
+Navigation is designed to live in either of the action slots (just remember you
+should use the `<nav>` element with the appropriate `aria-label` for that slot,
+see the example above).
+
+👉 As of now, only single-level navigation is supported. You may consider
+using the [Header Dialog](#header-dialog) for other use cases such as the user
+menu.
+
+```html
+<ul class="HeaderNav">
+  <li class="HeaderNavItem">
+    <a href="#" class="HeaderLink HeaderLink--current" aria-current="page">Job offers</a>
+  </li>
+  <li class="HeaderNavItem">
+    <a href="#" class="HeaderLink">Part-time jobs</a>
+  </li>
+  <li class="HeaderNavItem">
+    <a href="#" class="HeaderLink">Inspiration</a>
+  </li>
+  <li class="HeaderNavItem">
+    <a href="#" class="HeaderLink">Replies</a>
+  </li>
+  <li class="HeaderNavItem">
+    <a href="#" class="HeaderLink">Employers</a>
+  </li>
+</ul>
+```
+
+Both links and buttons are supported by `HeaderLink` class:
+
+```html
+<ul class="HeaderNav">
+  <li class="HeaderNavItem">
+    <a href="#" class="HeaderLink">Link item</a>
+  </li>
+  <li class="HeaderNavItem">
+    <button type="button" class="HeaderLink">Button item</button>
+  </li>
+</ul>
+```
+
+#### Other Content
+
+You can avoid using the [HeaderNav](#navigation) for standalone links. That way, you can combine links and buttons in
+the same container:
+
+```html
+<nav class="HeaderDesktopActions HeaderDesktopActions--end">
+  <a href="#" class="HeaderLink">Marian</a>
+  <a href="#" class="Button Button--primary Button--medium">Sign in</a>
+</nav>
+```
+
+## Header Dialog
+
+Header Dialog is Spirit's solution for responsive navigation and selected use
+cases such as the user menu. Please note Header Dialog is not intended to be
+used for second-level navigation in general.
+
+Header Dialog implements the [`<dialog>`][mdn-dialog] element to easily provide
+the best possible user experience and accessibility.
+
+```html
+<dialog id="my-header-dialog" class="HeaderDialog" aria-label="Menu">
+  <div class="HeaderDialog__panel">
+    <div class="HeaderDialog__content">
+      <!-- Close button with primary and secondary actions -->
+    </div>
+  </div>
+</dialog>
+```
+
+### Close Button
+
+Close button closes the Header Dialog using our Off-canvas JavaScript plugin.
+
+```html
+<button
+  type="button"
+  class="HeaderDialogCloseButton"
+  data-spirit-dismiss="offcanvas"
+  data-spirit-target="#my-header-dialog"
+  aria-controls="my-header-dialog"
+  aria-expanded="false"
+>
+  <svg width="24" height="24" aria-hidden="true">
+    <use xlink:href="/icons/svg/sprite.svg#close" />
+  </svg>
+  <span class="accessibility-hidden">Close</span>
+</button>
+```
+
+### Primary and Secondary Actions
+
+There are two slots for actions inside Header Dialog: primary actions slot and
+the optional secondary actions slot.
+
+👉 When there are too many actions, vertical overflow is correctly handled on
+small screens (`HeaderDialog__content` provides vertical scrolling when
+necessary).
+
+```html
+<nav class="HeaderDialogActions HeaderDialogActions--primary" aria-label="Main navigation">
+  <!-- Primary actions -->
+</nav>
+<nav class="HeaderDialogActions HeaderDialogActions--secondary">
+  <!-- Secondary actions -->
+</nav>
+```
+
+<!--lint disable no-duplicate-headings -->
+
+#### Primary and Secondary Actions Navigation
+
+<!--lint enable no-duplicate-headings -->
+
+Navigation capabilities are very similar to those of Header. All principles
+apply here as well, with the only difference in class names starting with
+`HeaderDialog` instead of `Header`.
+
+```html
+<ul class="HeaderDialogNav">
+  <li class="HeaderDialogNavItem">
+    <a href="#" class="HeaderDialogLink HeaderDialogLink--current" aria-current="page">Job offers</a>
+  </li>
+  <li class="HeaderDialogNavItem">
+    <a href="#" class="HeaderDialogLink">Part-time jobs</a>
+  </li>
+  <li class="HeaderDialogNavItem">
+    <a href="#" class="HeaderDialogLink">Inspiration</a>
+  </li>
+  <li class="HeaderDialogNavItem">
+    <a href="#" class="HeaderDialogLink">Replies</a>
+  </li>
+  <li class="HeaderDialogNavItem">
+    <a href="#" class="HeaderDialogLink">Employers</a>
+  </li>
+</ul>
+```
+
+Navigation items can be links, buttons, or just text:
+
+```html
+<ul class="HeaderDialogNav">
+  <li class="HeaderDialogNavItem">
+    <a href="#" class="HeaderDialogLink">Link item</a>
+  </li>
+  <li class="HeaderDialogNavItem">
+    <button type="button" class="HeaderDialogLink">Button item</button>
+  </li>
+  <li class="HeaderDialogNavItem">
+    <span class="HeaderDialogText">Text item</span>
+  </li>
+</ul>
+```
+
+## Composition
+
+This is how all supported building blocks of the Header build up the complete
+composition:
+
+```html
+<header class="Header">
+  <!-- Branding -->
+  <!-- Mobile-only actions -->
+  <!-- Desktop-only primary actions -->
+  <!-- Desktop-only secondary actions -->
+</header>
+```
+
+And the complete Header Dialog:
+
+```html
+<dialog class="HeaderDialog">
+  <div class="HeaderDialog__panel">
+    <div class="HeaderDialog__content">
+      <!-- Close button -->
+      <!-- Primary actions -->
+      <!-- Secondary actions -->
+    </div>
+  </div>
+</dialog>
+```
+
+<details>
+  <summary>Show full example code of Header with responsive navigation</summary>
+
+```html
+<!-- Header: start -->
+<header class="Header">
+  <a href="#" aria-label="Spirit homepage">
+    <img src="…" width="65" height="24" alt="Spirit" />
+  </a>
+
+  <!-- HeaderMobileActions: start -->
+  <div class="HeaderMobileActions">
+    <button
+      type="button"
+      class="Button Button--secondary Button--medium Button--symmetrical"
+      data-spirit-toggle="offcanvas"
+      data-spirit-target="#header-dialog-example-1"
+      aria-controls="header-dialog-example-1"
+      aria-expanded="false"
+    >
+      <svg width="24" height="24" aria-hidden="true">
+        <use xlink:href="/icons/svg/sprite.svg#hamburger" />
+      </svg>
+      <span class="accessibility-hidden">Menu</span>
+    </button>
+  </div>
+  <!-- HeaderMobileActions: end -->
+
+  <!-- HeaderDesktopActions: start -->
+  <nav class="HeaderDesktopActions" aria-label="Main navigation">
+    <!-- HeaderNav: start -->
+    <ul class="HeaderNav">
+      <li class="HeaderNavItem">
+        <a href="#" class="HeaderLink HeaderLink--current" aria-current="page">Job offers</a>
+      </li>
+      <li class="HeaderNavItem">
+        <a href="#" class="HeaderLink">Part-time jobs</a>
+      </li>
+      <li class="HeaderNavItem">
+        <a href="#" class="HeaderLink">Inspiration</a>
+      </li>
+      <li class="HeaderNavItem">
+        <a href="#" class="HeaderLink">Replies</a>
+      </li>
+      <li class="HeaderNavItem">
+        <a href="#" class="HeaderLink">Employers</a>
+      </li>
+    </ul>
+    <!-- HeaderNav: end -->
+  </nav>
+  <!-- HeaderDesktopActions: end -->
+
+  <!-- HeaderDesktopActions: start -->
+  <nav class="HeaderDesktopActions HeaderDesktopActions--end">
+    <a href="#" class="Button Button--primary Button--medium">Sign in</a>
+    <a href="#" class="Button Button--secondary Button--medium">Enterprise</a>
+  </nav>
+  <!-- HeaderDesktopActions: end -->
+</header>
+<!-- Header: end -->
+
+<!-- HeaderDialog: start -->
+<dialog id="header-dialog-example-1" class="HeaderDialog" aria-label="Menu">
+  <div class="HeaderDialog__panel">
+    <div class="HeaderDialog__content">
+      <!-- HeaderDialogCloseButton: start -->
+      <button
+        type="button"
+        class="HeaderDialogCloseButton"
+        data-spirit-dismiss="offcanvas"
+        data-spirit-target="#header-dialog-example-1"
+        aria-controls="header-dialog-example-1"
+        aria-expanded="false"
+      >
+        <svg width="24" height="24" aria-hidden="true">
+          <use xlink:href="/icons/svg/sprite.svg#close" />
+        </svg>
+        <span class="accessibility-hidden">Close</span>
+      </button>
+      <!-- HeaderDialogCloseButton: end -->
+
+      <!-- HeaderDialogActions: start -->
+      <nav class="HeaderDialogActions HeaderDialogActions--primary" aria-label="Main navigation">
+        <!-- HeaderDialogNav: start -->
+        <ul class="HeaderDialogNav">
+          <li class="HeaderDialogNavItem">
+            <a href="#" class="HeaderDialogLink HeaderDialogLink--current" aria-current="page">Job offers</a>
+          </li>
+          <li class="HeaderDialogNavItem">
+            <a href="#" class="HeaderDialogLink">Part-time jobs</a>
+          </li>
+          <li class="HeaderDialogNavItem">
+            <a href="#" class="HeaderDialogLink">Inspiration</a>
+          </li>
+          <li class="HeaderDialogNavItem">
+            <a href="#" class="HeaderDialogLink">Replies</a>
+          </li>
+          <li class="HeaderDialogNavItem">
+            <a href="#" class="HeaderDialogLink">Employers</a>
+          </li>
+        </ul>
+        <!-- HeaderDialogNav: end -->
+      </nav>
+      <!-- HeaderDialogActions: end -->
+
+      <!-- HeaderDialogActions: start -->
+      <nav class="HeaderDialogActions HeaderDialogActions--secondary">
+        <a href="#" class="Button Button--primary Button--medium">Sign in</a>
+        <a href="#" class="Button Button--secondary Button--medium">Enterprise</a>
+      </nav>
+      <!-- HeaderDialogActions: end -->
+    </div>
+  </div>
+</dialog>
+<!-- HeaderDialog: end -->
+```
+
+</details>
+
+## Known Limitations
+
+- Header Dialog is currently the only responsive option for actions on mobile
+  and tablet screens. As a consequence, the navigation markup needs to be
+  duplicated in your HTML.
+- Only single-level navigation is currently supported. However, you can provide
+  a custom navigation component instead of the built-in `HeaderNav` (or
+  `HeaderDialogNav`) as long as it works with the responsive off-canvas
+  design of Header Dialog.
+- The Header breakpoint is mapped to the desktop breakpoint and currently cannot
+  be changed.
+- As of now, the Header height cannot be changed.
+
+✍️ Please do feel free to let us know should you believe this component lacks
+some important capabilities. Thank you! 🙏
+
+[web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md
+[mdn-dialog]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+[offcanvas-docs]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Offcanvas/README.md
diff --git a/packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_Header.scss b/packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_Header.scss
new file mode 100644
index 0000000000..d88aa68b4f
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_Header.scss
@@ -0,0 +1,23 @@
+@use '../../tools/breakpoint';
+@use 'theme';
+
+.UNSTABLE_Header {
+    flex: none;
+    border-bottom: theme.$border-width theme.$border-style theme.$border-color;
+    background-color: theme.$background-color;
+
+    @include breakpoint.up(theme.$breakpoint-desktop) {
+        padding-inline: theme.$padding-x-desktop;
+    }
+}
+
+.UNSTABLE_Header__container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: theme.$height;
+}
+
+.UNSTABLE_Header--simple .UNSTABLE_Header__container {
+    justify-content: space-around;
+}
diff --git a/packages/web/src/scss/components/UNSTABLE_Header/_theme.scss b/packages/web/src/scss/components/UNSTABLE_Header/_theme.scss
new file mode 100644
index 0000000000..b5545cb503
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_Header/_theme.scss
@@ -0,0 +1,9 @@
+@use '@tokens' as tokens;
+
+$breakpoint-desktop: tokens.$breakpoint-desktop;
+$padding-x-desktop: tokens.$space-1600;
+$height: 72px;
+$border-width: tokens.$border-width-100;
+$border-style: solid;
+$border-color: tokens.$border-basic;
+$background-color: tokens.$component-header-background;
diff --git a/packages/web/src/scss/components/UNSTABLE_Header/_tools.scss b/packages/web/src/scss/components/UNSTABLE_Header/_tools.scss
new file mode 100644
index 0000000000..629444e367
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_Header/_tools.scss
@@ -0,0 +1,59 @@
+// 1. Use an `::after` pseudo-element to create a decorative border.
+
+@use 'theme';
+
+%link {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: var(--header-link-padding-y, #{theme.$header-link-padding-y})
+        var(--header-link-padding-x, #{theme.$header-link-padding-x});
+    color: theme.$header-link-color;
+    background-color: theme.$header-link-background-color;
+    transition-property: color, background-color;
+    transition-duration: theme.$header-link-transition-duration;
+
+    // 1.
+    &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: var(--header-link-decoration-width, 100%);
+        height: var(--header-link-decoration-height, 100%);
+        background-color: theme.$header-link-current-border-color;
+        transform: scale(var(--header-link-decoration-scale-x, 0), var(--header-link-decoration-scale-y, 0));
+        transform-origin: var(--header-link-decoration-transform-origin, center);
+    }
+
+    &:hover {
+        text-decoration: none;
+        color: theme.$header-link-color-state-hover;
+        background-color: theme.$header-link-background-color-state-hover;
+    }
+
+    &:active {
+        text-decoration: none;
+        color: theme.$header-link-color-state-active;
+        background-color: theme.$header-link-background-color-state-active;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+        // 1.
+        &::after {
+            transition: transform theme.$header-link-transition-timing theme.$header-link-transition-duration;
+        }
+    }
+}
+
+%link-current {
+    color: theme.$header-link-color-current;
+    background-color: theme.$header-link-background-color-current;
+
+    &:hover,
+    &:active {
+        color: theme.$header-link-color-current;
+        background-color: theme.$header-link-background-color-current;
+    }
+}
diff --git a/packages/web/src/scss/components/UNSTABLE_Header/index.html b/packages/web/src/scss/components/UNSTABLE_Header/index.html
new file mode 100644
index 0000000000..9ab2236a3a
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_Header/index.html
@@ -0,0 +1,218 @@
+{{#> web/layout/default title="Header" parentPageName="Components" isUnstable=true isFullWidth=true }}
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+    <h2 class="docs-Heading">Minimal Header</h2>
+  </div>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <header class="UNSTABLE_Header UNSTABLE_Header--simple">
+      <div class="Container">
+        <div class="UNSTABLE_Header__container">
+          <a href="#" aria-label="JobBoard homepage">
+            <div class="ProductLogo">
+              {{> web/assets/jobBoardLogo }}
+            </div>
+          </a>
+        </div>
+      </div>
+    </header>
+
+  </div>
+</section>
+
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+    <h2 class="docs-Heading">Header</h2>
+  </div>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <header class="UNSTABLE_Header">
+      <div class="UNSTABLE_Header__container Container">
+        <a href="#" aria-label="JobBoard homepage">
+          <div class="ProductLogo">
+            {{> web/assets/jobBoardLogo }}
+          </div>
+        </a>
+        <nav class="Navigation Navigation--start Navigation--main">
+          <ul>
+            <li>
+              <a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
+            </li>
+            <li>
+              <a href="#" class="NavigationLink">Not Home</a>
+            </li>
+            <li>
+              <a href="#" class="NavigationLink NavigationLink--disabled">Home for Disabled</a>
+            </li>
+          </ul>
+        </nav>
+        <nav class="Navigation">
+          <ul>
+            <li>
+              <button class="Button Button--tertiary Button--medium Button--symmetrical">
+                <svg width="24" height="24" aria-hidden="true">
+                  <use xlink:href="/assets/icons/svg/sprite.svg#search" />
+                </svg>
+              </button>
+            </li>
+            <li>
+              <button class="Button Button--secondary Button--medium">Sign up</button>
+            </li>
+            <li>
+              <button class="Button Button--primary Button--medium">Post a job</button>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+  </div>
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+    <h2 class="docs-Heading">Header with only Main Navigation</h2>
+  </div>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <header class="UNSTABLE_Header">
+      <div class="Container">
+        <div class="UNSTABLE_Header__container">
+          <a href="#" aria-label="JobBoard homepage">
+            <div class="ProductLogo">
+              {{> web/assets/jobBoardLogo }}
+            </div>
+          </a>
+          <nav class="Navigation Navigation--start Navigation--main">
+            <ul>
+              <li class="NavigationItem NavigationItem--selected">
+                <a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
+              </li>
+              <li>
+                <a href="#" class="NavigationLink">Not Home</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+  </div>
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+    <h2 class="docs-Heading">Header without Main Navigation</h2>
+  </div>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <header class="UNSTABLE_Header">
+      <div class="Container">
+        <div class="UNSTABLE_Header__container">
+          <a href="#" aria-label="JobBoard homepage">
+            <div class="ProductLogo">
+              {{> web/assets/jobBoardLogo }}
+            </div>
+          </a>
+          <nav class="Navigation">
+            <ul>
+              <li>
+                <button class="Button Button--tertiary Button--medium Button--symmetrical">
+                  <svg width="24" height="24" aria-hidden="true">
+                    <use xlink:href="/assets/icons/svg/sprite.svg#search" />
+                  </svg>
+                </button>
+              </li>
+              <li>
+                <button class="Button Button--secondary Button--medium">Sign up</button>
+              </li>
+              <li>
+                <button class="Button Button--primary Button--medium">Post a job</button>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+  </div>
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+    <h2 class="docs-Heading">Header with only Main Navigation on End</h2>
+  </div>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <header class="UNSTABLE_Header">
+      <div class="Container">
+        <div class="UNSTABLE_Header__container">
+          <a href="#" aria-label="JobBoard homepage">
+            <div class="ProductLogo">
+              {{> web/assets/jobBoardLogo }}
+            </div>
+          </a>
+          <nav class="Navigation Navigation--main Navigation--end">
+            <ul>
+              <li class="NavigationItem NavigationItem--selected">
+                <a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
+              </li>
+              <li>
+                <a href="#" class="NavigationLink">Not Home</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+  </div>
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+    <h2 class="docs-Heading">Header without Main Navigation and on Start</h2>
+  </div>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <header class="UNSTABLE_Header">
+      <div class="Container">
+        <div class="UNSTABLE_Header__container">
+          <a href="#" aria-label="JobBoard homepage">
+            <div class="ProductLogo">
+              {{> web/assets/jobBoardLogo }}
+            </div>
+          </a>
+          <nav class="Navigation Navigation--start">
+            <ul>
+              <li>
+                <button class="Button Button--tertiary Button--medium Button--symmetrical">
+                  <svg width="24" height="24" aria-hidden="true">
+                    <use xlink:href="/assets/icons/svg/sprite.svg#search" />
+                  </svg>
+                </button>
+              </li>
+              <li>
+                <button class="Button Button--secondary Button--medium">Sign up</button>
+              </li>
+              <li>
+                <button class="Button Button--primary Button--medium">Post a job</button>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+  </div>
+</section>
+
+{{/web/layout/default }}
diff --git a/packages/web/src/scss/components/UNSTABLE_Header/index.scss b/packages/web/src/scss/components/UNSTABLE_Header/index.scss
new file mode 100644
index 0000000000..cdfc24c51f
--- /dev/null
+++ b/packages/web/src/scss/components/UNSTABLE_Header/index.scss
@@ -0,0 +1,2 @@
+// Header
+@forward 'UNSTABLE_Header';
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
index eae0f2b1ac..d569873ac0 100644
--- a/packages/web/src/scss/components/index.scss
+++ b/packages/web/src/scss/components/index.scss
@@ -32,6 +32,7 @@
 @forward 'UNSTABLE_ActionLayout';
 @forward 'UNSTABLE_Avatar';
 @forward 'UNSTABLE_EmptyState';
+@forward 'UNSTABLE_Header';
 @forward 'UNSTABLE_Section';
 @forward 'UNSTABLE_Slider';
 @forward 'UNSTABLE_Toggle';

From f70e8356d2b7b3d4914f90e58dc4633c66a7be7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Thu, 28 Nov 2024 13:53:19 +0100
Subject: [PATCH 3/4] Feat(web): Introduce Navigation

---
 .../src/scss/components/Navigation/README.md  |  7 +++
 .../components/Navigation/_Navigation.scss    | 35 +++++++++++++
 .../Navigation/_NavigationLink.scss           | 50 +++++++++++++++++++
 .../scss/components/Navigation/_theme.scss    | 22 ++++++++
 .../src/scss/components/Navigation/index.html | 10 ++++
 .../src/scss/components/Navigation/index.scss |  2 +
 packages/web/src/scss/components/index.scss   |  1 +
 7 files changed, 127 insertions(+)
 create mode 100644 packages/web/src/scss/components/Navigation/README.md
 create mode 100644 packages/web/src/scss/components/Navigation/_Navigation.scss
 create mode 100644 packages/web/src/scss/components/Navigation/_NavigationLink.scss
 create mode 100644 packages/web/src/scss/components/Navigation/_theme.scss
 create mode 100644 packages/web/src/scss/components/Navigation/index.html
 create mode 100644 packages/web/src/scss/components/Navigation/index.scss

diff --git a/packages/web/src/scss/components/Navigation/README.md b/packages/web/src/scss/components/Navigation/README.md
new file mode 100644
index 0000000000..c34c315c55
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/README.md
@@ -0,0 +1,7 @@
+# Divider
+
+The `Divider` component is used as horizontal separator of the content.
+
+```html
+<hr class="Divider" />
+```
diff --git a/packages/web/src/scss/components/Navigation/_Navigation.scss b/packages/web/src/scss/components/Navigation/_Navigation.scss
new file mode 100644
index 0000000000..fdcd08d508
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/_Navigation.scss
@@ -0,0 +1,35 @@
+@use '../../tools/reset';
+@use 'theme';
+
+.Navigation,
+.Navigation > ul,
+.Navigation > ul > li {
+    display: flex;
+}
+
+.Navigation:not(.Navigation--main),
+.Navigation:not(.Navigation--main) > ul {
+    gap: theme.$gap;
+    align-content: center;
+}
+
+.Navigation > ul {
+    @include reset.list();
+}
+
+.Navigation--main {
+    align-self: stretch;
+    align-items: stretch;
+}
+
+.Navigation--start {
+    margin-inline-end: auto;
+
+    &:not(:first-child) {
+        margin-inline-start: theme.$start-spacing;
+    }
+}
+
+.Navigation--end {
+    margin-inline-start: auto;
+}
diff --git a/packages/web/src/scss/components/Navigation/_NavigationLink.scss b/packages/web/src/scss/components/Navigation/_NavigationLink.scss
new file mode 100644
index 0000000000..b228e2dd24
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/_NavigationLink.scss
@@ -0,0 +1,50 @@
+@use '../../tools/typography';
+@use 'theme';
+
+.NavigationLink {
+    @include typography.generate(theme.$link-typography);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline: theme.$link-spacing;
+    color: theme.$link-color-state-default;
+    border-top: theme.$link-border-bottom-width theme.$link-border-bottom-style transparent;
+    border-bottom: theme.$link-border-bottom-width theme.$link-border-bottom-style
+        theme.$link-border-bottom-color-style-state-default;
+    background-color: theme.$link-background-color-state-default;
+
+    @media (hover: hover) {
+        &:hover {
+            text-decoration: none;
+            color: theme.$link-color-state-hover;
+            background-color: theme.$link-background-color-state-hover;
+        }
+    }
+
+    &:active {
+        color: theme.$link-color-state-active;
+        background-color: theme.$link-background-color-state-active;
+    }
+}
+
+.NavigationLink--selected {
+    color: theme.$link-color-state-selected;
+    border-bottom-color: theme.$link-border-bottom-color-style-selected-state-default;
+    background-color: theme.$link-background-color-state-selected;
+
+    @media (hover: hover) {
+        &:hover {
+            border-bottom-color: theme.$link-border-bottom-color-style-selected-state-hover;
+        }
+    }
+
+    &:active {
+        border-bottom-color: theme.$link-border-bottom-color-style-selected-state-active;
+    }
+}
+
+.NavigationLink--disabled {
+    color: theme.$link-color-state-disabled;
+    pointer-events: none;
+}
diff --git a/packages/web/src/scss/components/Navigation/_theme.scss b/packages/web/src/scss/components/Navigation/_theme.scss
new file mode 100644
index 0000000000..3e1506fa6e
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/_theme.scss
@@ -0,0 +1,22 @@
+@use '@tokens' as tokens;
+
+$gap: tokens.$space-700;
+$start-spacing: tokens.$space-1000;
+
+$link-typography: tokens.$body-small-semibold;
+$link-spacing: tokens.$space-600;
+$link-color-state-default: tokens.$component-header-item-state-default;
+$link-color-state-hover: tokens.$component-header-item-state-hover;
+$link-color-state-active: tokens.$component-header-item-state-active;
+$link-color-state-selected: tokens.$component-header-item-state-selected;
+$link-color-state-disabled: tokens.$disabled-content;
+$link-border-bottom-width: tokens.$border-width-200;
+$link-border-bottom-style: solid;
+$link-border-bottom-color-style-state-default: transparent;
+$link-border-bottom-color-style-selected-state-default: tokens.$component-header-stripe-state-selected;
+$link-border-bottom-color-style-selected-state-hover: tokens.$component-header-stripe-state-unselected;
+$link-border-bottom-color-style-selected-state-active: tokens.$component-header-stripe-state-unselected;
+$link-background-color-state-default: tokens.$component-header-item-background-state-default;
+$link-background-color-state-hover: tokens.$component-header-item-background-state-hover;
+$link-background-color-state-active: tokens.$component-header-item-background-state-active;
+$link-background-color-state-selected: tokens.$component-header-item-background-state-selected;
diff --git a/packages/web/src/scss/components/Navigation/index.html b/packages/web/src/scss/components/Navigation/index.html
new file mode 100644
index 0000000000..7056a7371f
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/index.html
@@ -0,0 +1,10 @@
+{{#> web/layout/default title="Navigation" parentPageName="Components" }}
+
+<section class="UNSTABLE_Section">
+  <h2 class="docs-Heading">Default</h2>
+  <div class="docs-Stack docs-Stack--stretch">
+    x
+  </div>
+</section>
+
+{{/web/layout/default }}
diff --git a/packages/web/src/scss/components/Navigation/index.scss b/packages/web/src/scss/components/Navigation/index.scss
new file mode 100644
index 0000000000..b7fc4e9b32
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/index.scss
@@ -0,0 +1,2 @@
+@forward 'Navigation';
+@forward 'NavigationLink';
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
index d569873ac0..51fc1d2214 100644
--- a/packages/web/src/scss/components/index.scss
+++ b/packages/web/src/scss/components/index.scss
@@ -15,6 +15,7 @@
 @forward 'Header';
 @forward 'Item';
 @forward 'Modal';
+@forward 'Navigation';
 @forward 'Pagination';
 @forward 'PartnerLogo';
 @forward 'Pill';

From 0b0fa78a404dc6a7930a4352fe819958e043987f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com>
Date: Fri, 29 Nov 2024 11:04:43 +0100
Subject: [PATCH 4/4] fixup! Feat(web): Introduce UNSTABLE Header

---
 .../UNSTABLE_Header/_UNSTABLE_Header.scss     |  10 +
 .../components/UNSTABLE_Header/index.html     | 230 ++++++++++--------
 2 files changed, 145 insertions(+), 95 deletions(-)

diff --git a/packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_Header.scss b/packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_Header.scss
index d88aa68b4f..990843d0e7 100644
--- a/packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_Header.scss
+++ b/packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_Header.scss
@@ -1,4 +1,5 @@
 @use '../../tools/breakpoint';
+@use '../Container';
 @use 'theme';
 
 .UNSTABLE_Header {
@@ -12,12 +13,21 @@
 }
 
 .UNSTABLE_Header__container {
+    @extend .Container;
+
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: theme.$height;
 }
 
+.UNSTABLE_Header--fluid .UNSTABLE_Header__container {
+    width: auto;
+    max-width: none;
+    padding-inline: 0;
+    margin-inline: 0;
+}
+
 .UNSTABLE_Header--simple .UNSTABLE_Header__container {
     justify-content: space-around;
 }
diff --git a/packages/web/src/scss/components/UNSTABLE_Header/index.html b/packages/web/src/scss/components/UNSTABLE_Header/index.html
index 9ab2236a3a..7417145cd7 100644
--- a/packages/web/src/scss/components/UNSTABLE_Header/index.html
+++ b/packages/web/src/scss/components/UNSTABLE_Header/index.html
@@ -8,14 +8,12 @@ <h2 class="docs-Heading">Minimal Header</h2>
   <div class="docs-Stack docs-Stack--stretch">
 
     <header class="UNSTABLE_Header UNSTABLE_Header--simple">
-      <div class="Container">
-        <div class="UNSTABLE_Header__container">
-          <a href="#" aria-label="JobBoard homepage">
-            <div class="ProductLogo">
-              {{> web/assets/jobBoardLogo }}
-            </div>
-          </a>
-        </div>
+      <div class="UNSTABLE_Header__container">
+        <a href="#" aria-label="JobBoard homepage">
+          <div class="ProductLogo">
+            {{> web/assets/jobBoardLogo }}
+          </div>
+        </a>
       </div>
     </header>
 
@@ -31,7 +29,7 @@ <h2 class="docs-Heading">Header</h2>
   <div class="docs-Stack docs-Stack--stretch">
 
     <header class="UNSTABLE_Header">
-      <div class="UNSTABLE_Header__container Container">
+      <div class="UNSTABLE_Header__container">
         <a href="#" aria-label="JobBoard homepage">
           <div class="ProductLogo">
             {{> web/assets/jobBoardLogo }}
@@ -81,24 +79,22 @@ <h2 class="docs-Heading">Header with only Main Navigation</h2>
   <div class="docs-Stack docs-Stack--stretch">
 
     <header class="UNSTABLE_Header">
-      <div class="Container">
-        <div class="UNSTABLE_Header__container">
-          <a href="#" aria-label="JobBoard homepage">
-            <div class="ProductLogo">
-              {{> web/assets/jobBoardLogo }}
-            </div>
-          </a>
-          <nav class="Navigation Navigation--start Navigation--main">
-            <ul>
-              <li class="NavigationItem NavigationItem--selected">
-                <a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
-              </li>
-              <li>
-                <a href="#" class="NavigationLink">Not Home</a>
-              </li>
-            </ul>
-          </nav>
-        </div>
+      <div class="UNSTABLE_Header__container">
+        <a href="#" aria-label="JobBoard homepage">
+          <div class="ProductLogo">
+            {{> web/assets/jobBoardLogo }}
+          </div>
+        </a>
+        <nav class="Navigation Navigation--start Navigation--main">
+          <ul>
+            <li class="NavigationItem NavigationItem--selected">
+              <a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
+            </li>
+            <li>
+              <a href="#" class="NavigationLink">Not Home</a>
+            </li>
+          </ul>
+        </nav>
       </div>
     </header>
 
@@ -113,31 +109,29 @@ <h2 class="docs-Heading">Header without Main Navigation</h2>
   <div class="docs-Stack docs-Stack--stretch">
 
     <header class="UNSTABLE_Header">
-      <div class="Container">
-        <div class="UNSTABLE_Header__container">
-          <a href="#" aria-label="JobBoard homepage">
-            <div class="ProductLogo">
-              {{> web/assets/jobBoardLogo }}
-            </div>
-          </a>
-          <nav class="Navigation">
-            <ul>
-              <li>
-                <button class="Button Button--tertiary Button--medium Button--symmetrical">
-                  <svg width="24" height="24" aria-hidden="true">
-                    <use xlink:href="/assets/icons/svg/sprite.svg#search" />
-                  </svg>
-                </button>
-              </li>
-              <li>
-                <button class="Button Button--secondary Button--medium">Sign up</button>
-              </li>
-              <li>
-                <button class="Button Button--primary Button--medium">Post a job</button>
-              </li>
-            </ul>
-          </nav>
-        </div>
+      <div class="UNSTABLE_Header__container">
+        <a href="#" aria-label="JobBoard homepage">
+          <div class="ProductLogo">
+            {{> web/assets/jobBoardLogo }}
+          </div>
+        </a>
+        <nav class="Navigation">
+          <ul>
+            <li>
+              <button class="Button Button--tertiary Button--medium Button--symmetrical">
+                <svg width="24" height="24" aria-hidden="true">
+                  <use xlink:href="/assets/icons/svg/sprite.svg#search" />
+                </svg>
+              </button>
+            </li>
+            <li>
+              <button class="Button Button--secondary Button--medium">Sign up</button>
+            </li>
+            <li>
+              <button class="Button Button--primary Button--medium">Post a job</button>
+            </li>
+          </ul>
+        </nav>
       </div>
     </header>
 
@@ -152,24 +146,22 @@ <h2 class="docs-Heading">Header with only Main Navigation on End</h2>
   <div class="docs-Stack docs-Stack--stretch">
 
     <header class="UNSTABLE_Header">
-      <div class="Container">
-        <div class="UNSTABLE_Header__container">
-          <a href="#" aria-label="JobBoard homepage">
-            <div class="ProductLogo">
-              {{> web/assets/jobBoardLogo }}
-            </div>
-          </a>
-          <nav class="Navigation Navigation--main Navigation--end">
-            <ul>
-              <li class="NavigationItem NavigationItem--selected">
-                <a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
-              </li>
-              <li>
-                <a href="#" class="NavigationLink">Not Home</a>
-              </li>
-            </ul>
-          </nav>
-        </div>
+      <div class="UNSTABLE_Header__container">
+        <a href="#" aria-label="JobBoard homepage">
+          <div class="ProductLogo">
+            {{> web/assets/jobBoardLogo }}
+          </div>
+        </a>
+        <nav class="Navigation Navigation--main Navigation--end">
+          <ul>
+            <li class="NavigationItem NavigationItem--selected">
+              <a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
+            </li>
+            <li>
+              <a href="#" class="NavigationLink">Not Home</a>
+            </li>
+          </ul>
+        </nav>
       </div>
     </header>
 
@@ -184,31 +176,79 @@ <h2 class="docs-Heading">Header without Main Navigation and on Start</h2>
   <div class="docs-Stack docs-Stack--stretch">
 
     <header class="UNSTABLE_Header">
-      <div class="Container">
-        <div class="UNSTABLE_Header__container">
-          <a href="#" aria-label="JobBoard homepage">
-            <div class="ProductLogo">
-              {{> web/assets/jobBoardLogo }}
-            </div>
-          </a>
-          <nav class="Navigation Navigation--start">
-            <ul>
-              <li>
-                <button class="Button Button--tertiary Button--medium Button--symmetrical">
-                  <svg width="24" height="24" aria-hidden="true">
-                    <use xlink:href="/assets/icons/svg/sprite.svg#search" />
-                  </svg>
-                </button>
-              </li>
-              <li>
-                <button class="Button Button--secondary Button--medium">Sign up</button>
-              </li>
-              <li>
-                <button class="Button Button--primary Button--medium">Post a job</button>
-              </li>
-            </ul>
-          </nav>
-        </div>
+      <div class="UNSTABLE_Header__container">
+        <a href="#" aria-label="JobBoard homepage">
+          <div class="ProductLogo">
+            {{> web/assets/jobBoardLogo }}
+          </div>
+        </a>
+        <nav class="Navigation Navigation--start">
+          <ul>
+            <li>
+              <button class="Button Button--tertiary Button--medium Button--symmetrical">
+                <svg width="24" height="24" aria-hidden="true">
+                  <use xlink:href="/assets/icons/svg/sprite.svg#search" />
+                </svg>
+              </button>
+            </li>
+            <li>
+              <button class="Button Button--secondary Button--medium">Sign up</button>
+            </li>
+            <li>
+              <button class="Button Button--primary Button--medium">Post a job</button>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+  </div>
+</section>
+
+<section class="UNSTABLE_Section">
+
+  <div class="Container">
+    <h2 class="docs-Heading">Header Fluid</h2>
+  </div>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <header class="UNSTABLE_Header UNSTABLE_Header--fluid">
+      <div class="UNSTABLE_Header__container">
+        <a href="#" aria-label="JobBoard homepage">
+          <div class="ProductLogo">
+            {{> web/assets/jobBoardLogo }}
+          </div>
+        </a>
+        <nav class="Navigation Navigation--start Navigation--main">
+          <ul>
+            <li>
+              <a href="#" class="NavigationLink NavigationLink--selected" aria-current="page">Home</a>
+            </li>
+            <li>
+              <a href="#" class="NavigationLink">Not Home</a>
+            </li>
+            <li>
+              <a href="#" class="NavigationLink NavigationLink--disabled">Home for Disabled</a>
+            </li>
+          </ul>
+        </nav>
+        <nav class="Navigation">
+          <ul>
+            <li>
+              <button class="Button Button--tertiary Button--medium Button--symmetrical">
+                <svg width="24" height="24" aria-hidden="true">
+                  <use xlink:href="/assets/icons/svg/sprite.svg#search" />
+                </svg>
+              </button>
+            </li>
+            <li>
+              <button class="Button Button--secondary Button--medium">Sign up</button>
+            </li>
+            <li>
+              <button class="Button Button--primary Button--medium">Post a job</button>
+            </li>
+          </ul>
+        </nav>
       </div>
     </header>