What is it

A header is layout pattern that helps the user identify the site.

When to use it

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.

How to use it

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 core: true and create your own pattern in the location you wish it in your design system. 

        
        

          
          
          

            

              
 [site name]

            

            
          

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

//- required variables
//- site - the site name that goes in the site title
//- root - the path to the root of the site

header
	// The headline banner area 
	svg(height='5.5rem' width='100%' xmlns='http://www.w3.org/2000/svg' aria-hidden='true')
		text= site
	div
		div.header-title
			h1 
				a(href="./")= site
		// Other sections can go here, such as search and directory

header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--colour-grey-xxl)}header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}header>div .header-title h1{margin:0;padding:0 1rem}header>div .header-title h1 a,header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}
@import "scss/core/header/header;

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

$header-bg-color: var(--colour-grey-xxl) !default;
$font-heading: sans-serif !default;
$font-weight: 700 !default;

@mixin header {
	header {
		display: grid;
		grid-template-rows: 1.75rem 3.5rem;
		grid-column: 2 / 4;
		overflow: hidden;

		svg {
			grid-column: 1 / -1;
			grid-row: 1 / -1;
			place-self: stretch;
			text {
				transform: translate(-1rem, 7.25rem);
				font-size: 10rem;
				font-weight: 1000; 
				font-family: $font-heading;
				fill: $header-bg-color;
			}
		}
		> div {
			grid-row: 2;
			grid-column: 1 / -1;

			display: grid;
			grid-column-gap: 1rem;
			grid-template-columns: auto max-content max-content;

			.header-title {
				h1 {
					margin: 0;
					padding: 0 1rem;
					a, a:visited {
						border-bottom: none;
						color: var(--colour-black);
						font-family: $font-heading;
						font-size: 2.5rem;
						font-size: 32px;
						font-weight: $font-weight;
						margin: 0;
						padding: 0;
						text-decoration: none;
					}
				}
			}
		}
	}
}