//-		DS2 core (c) 2024 Alexander McIlwraith 
//-		Core licensed under CC BY-SA 4.0 

extends ../../../core/_master-pattern
block content

	+h(0)
	p A header is layout pattern that helps the user identify the site.  
	+h(1)
	p Use a header at the top of every page. The 'front page' of a site may have a different header than the rest of the pages. 

	+h(2)
	p Place the header at the top of the page after the skip to main content link. You will likely want to replace core header should be replaced with your own site's header. To do this, remove the #[code.inline.language-js core: true ] and create your own pattern in the location you wish it in your design system. 

	tabset#header
		pre.language-html(tab="html")
			// create temp variables and store the design system values
			- var tmpsite= site
			- var tmproot= root
			- site = "[site name]"
			- root = "[site root]"
			
			include _header.pug
			
			//- reset variables to original values
			- site= tmpsite 
			- root= tmproot 
		pre.language-pug(tab="pug")
			include _header.pp
		pre.language-css(tab="css")
			include header.css
		div.language-sass(tab="scss")
			
			pre.language-sass.
				@use "scss/core/header/header;

			pre.language-sass
				include _header.scss