2024-06-13 00:00:00 -04:00
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Pattern</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body data-prismjs-copy-timeout="1500">
|
2024-07-14 16:18:52 -04:00
|
|
|
<h2>What is it</h2>
|
2024-07-16 03:57:34 -04:00
|
|
|
<p>A header is layout pattern that helps the user identify the site. </p>
|
2024-07-14 16:18:52 -04:00
|
|
|
<h2>When to use it</h2>
|
2024-07-16 03:57:34 -04:00
|
|
|
<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. </p>
|
2024-07-14 16:18:52 -04:00
|
|
|
<h2>How to use it</h2>
|
2024-07-16 03:57:34 -04:00
|
|
|
<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. </p>
|
2024-06-13 00:00:00 -04:00
|
|
|
<div class="tab-group" id="header">
|
|
|
|
|
<pre class="language-html" data-tab="html">
|
|
|
|
|
<!-- create temp variables and store the design system values-->
|
|
|
|
|
<header>
|
|
|
|
|
<!-- The headline banner area -->
|
|
|
|
|
<svg height="5.5rem" width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
|
|
|
<text>[site name]</text>
|
|
|
|
|
</svg>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="header-title">
|
2024-07-14 16:18:52 -04:00
|
|
|
<h1> <a href="./">[site name]</a></h1>
|
2024-06-13 00:00:00 -04:00
|
|
|
</div>
|
|
|
|
|
<!-- Other sections can go here, such as search and directory-->
|
|
|
|
|
</div>
|
|
|
|
|
</header></pre>
|
2024-07-16 02:49:53 -04:00
|
|
|
<pre class="language-html" data-tab="html">
|
|
|
|
|
<header>
|
|
|
|
|
<!-- The headline banner area -->
|
|
|
|
|
<svg height="5.5rem" width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
|
|
|
<text>DS2 core</text>
|
|
|
|
|
</svg>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="header-title">
|
|
|
|
|
<h1> <a href="./">DS2 core</a></h1>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- Other sections can go here, such as search and directory-->
|
|
|
|
|
</div>
|
|
|
|
|
</header></pre>
|
|
|
|
|
<pre class="language-pug" data-tab="pug">//- DS2 core (c) 2024 Alexander McIlwraith
|
2024-07-11 21:05:34 -04:00
|
|
|
//- Licensed under CC BY-SA 4.0
|
|
|
|
|
|
2024-07-16 02:49:53 -04:00
|
|
|
//- required variables
|
|
|
|
|
//- site - the site name that goes in the site title
|
|
|
|
|
//- root - the path to the root of the site
|
2024-06-13 00:00:00 -04:00
|
|
|
|
2024-07-16 02:49:53 -04:00
|
|
|
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
|
|
|
|
|
</pre>
|
2024-07-11 21:05:34 -04:00
|
|
|
<pre class="language-css" data-tab="css">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;
|
2024-07-12 23:35:29 -04:00
|
|
|
fill: var(--colour-grey-xxl);
|
2024-07-11 21:05:34 -04:00
|
|
|
}
|
|
|
|
|
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;
|
2024-07-16 02:49:53 -04:00
|
|
|
}</pre>
|
|
|
|
|
<pre class="language-sass" data-tab="scss">//- 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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-07-11 21:05:34 -04:00
|
|
|
}</pre>
|
2024-06-13 00:00:00 -04:00
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
