//-		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. This basic header should be replaced with your own site's header. 


	div.tab-group#header
		pre.language-html(data-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-html(data-tab="html")
			include _header.pug
		pre.language-pug(data-tab="pug")
			include _header.pp
		pre.language-css(data-tab="css")
			include header.css
		pre.language-sass(data-tab="scss")
			include _header.scss