1
- Type
- primary
- Tags
- landing
- homepage
- mobile
- menu
Preview
Implementation
Markup
| Parameter | Definition | Type |
|---|---|---|
| url | URL: homepage | string |
| icon | SVG: symbol | string |
| h1 | heading: global | string |
| nav | anchors: navigation | array |
| id | attribute: id | string |
Brief
A primary header with navigation support. The menu has two modes for desktop
(expanded & compact) and one for mobile. The icon parameter accepts
an SVG symbol fragment by default.
Paths
- location:
components/headers/1 - activate:
templates/_/mixins.pug
Placement
- markup:
templates/_/body.pug - style:
styles/_/elements/header.styl - logic:
logic/root.js
Dependencies
- _.pug
- index.styl
- *.svg
- _.js
Examples
extends ../root
block body
body
block header
+header-1("/#front", "logo", "Heading", [
{
href: "/lorem/",
name: "Lorem"
},
{
href: "/quidem/",
name: "Quidem"
},
//...
])
block main
//...
header-1()
import header1 from 'headers/1/_';
header1();
2
- Type
- secondary
- Tags
- sectional
- breadcrumbs
- menu
Preview
Implementation
Markup
| Parameter | Definition | Type |
|---|---|---|
| url | URL: homepage | string |
| icon | SVG: fragment | string |
| h1 | heading: global | string |
| h2 | heading: section | string |
| breadcrumbs | breadcrumbs | array, object |
| hook | attribute: class | string |
Brief
A 2nd-level header designed to be used as a stand-alone, primary header for nested pages.
Pass an arbitrary class to the style hook parameter should greater specificity be required.
Paths
- location:
components/headers/2 - activate:
templates/_/mixins.pug
Placement
- markup:
templates/views/**/*.pug - style:
styles/views/**/*.styl
Dependencies
- _.pug
- index.styl
- *.svg
Example
extends body
block context
//...
block header
+header-2('/#front', 'logo', 'Heading', 'Heading 2', [
{
href: "/",
name: "Home"
},
{
href: "/about/",
name: "About"
},
//...
])
block main
//...
header-2()
3
- Type
- primary
- Tags
- minimal
- header
- navigation
Preview
Implementation
Markup
| Parameter | Definition | Type |
|---|---|---|
| url | URL: homepage | string |
| icon | SVG: fragment | string |
| h1 | heading: global | string |
| nav | anchors: navigation | array, object |
| hook | attribute: class | string |
Brief
This primary page header rely exclusively on HTML and CSS while oferring support for compact mobile viewports. Take it for a spin in the preview panel!
Paths
- location:
components/headers/3 - activate:
templates/_/mixins.pug
Placement
- markup:
templates/views/**/*.pug - style:
styles/views/**/*.styl
Dependencies
- _.pug
- index.styl
Example
block header
+header-3("/", "logo", "Heading", [
{
href: "/",
name: "Home"
},
{
href: "/login",
name: "Log in"
},
], "home")
header-3()