## 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.

    //-		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;
    }

    @use "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;
    					}
    				}
    			}
    		}
    	}
    }