Health Design System

Header: Dark

Header

⭐ Design System - Header

The header component uses and requires the

components to create the mobile navigation and search experience.

Javascript copies the elements from Sub nav into the main navigation and only shows them on mobile.

The search box is moved depending on the screen size.

<!-- Error rendering component -->
<!-- Could not render component '@main-nav--dark' - component not found. -->
<!-- Error: Could not render component '@main-nav--dark' - component not found.
    at Object.render (/home/beng/dev/git/health-design-system/node_modules/@frctl/handlebars/src/helpers/render.js:23:19)
    at Object.helperWrapper (/home/beng/dev/git/health-design-system/node_modules/promised-handlebars/index.js:130:23)
    at Object.<anonymous> (/home/beng/dev/git/health-design-system/node_modules/promised-handlebars/lib/utils.js:29:28)
    at Object.wrapper (/home/beng/dev/git/health-design-system/node_modules/handlebars/dist/cjs/handlebars/internal/wrapHelper.js:15:19)
    at Object.eval [as main] (eval at createFunctionContext (/home/beng/dev/git/health-design-system/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:262:23), <anonymous>:15:102)
    at main (/home/beng/dev/git/health-design-system/node_modules/handlebars/dist/cjs/handlebars/runtime.js:208:32)
    at ret (/home/beng/dev/git/health-design-system/node_modules/handlebars/dist/cjs/handlebars/runtime.js:212:12)
    at ret (/home/beng/dev/git/health-design-system/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:519:21)
    at prepareAndResolveMarkers (/home/beng/dev/git/health-design-system/node_modules/promised-handlebars/index.js:99:39)
    at /home/beng/dev/git/health-design-system/node_modules/promised-handlebars/lib/utils.js:29:28
    at HandlebarsAdapter.render (/home/beng/dev/git/health-design-system/node_modules/@frctl/handlebars/src/adapter.js:37:30)
    at ComponentSource._renderVariant (/home/beng/dev/git/health-design-system/node_modules/@frctl/fractal/src/api/components/source.js:212:30)
    at _renderVariant.next (<anonymous>)
    at onFulfilled (/home/beng/dev/git/health-design-system/node_modules/co/index.js:65:19) -->