<header id="header">
<div class="header-content">
<p class="main-title">
<a href="../preview/dashboard.html" class="block-link"><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#logo-badge" />
</svg>
Fine Wine Club</a>
</p>
</div>
<div class="header-content">
<div class="shopping-list-wrapper">
<label for="shopping-list-trigger">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#clipboard-list" />
</svg>
<span class="trigger-label">Shopping list</span>
<span class="list-counter">3</span>
</label>
<input id="shopping-list-trigger" type="checkbox">
<div class="shopping-list">
<form action="#" method="post">
<div class="shopping-list-content">
<table class="shopping-list-table">
<thead>
<tr>
<th scope="col">Producer</th>
<th scope="col">Wine</th>
<th scope="col">Vintage</th>
<th scope="col"><span class="at-only">Remove</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Chateu Pontet-Canet</td>
<td>Chateu Pontet-Canet</td>
<td>2010</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td>Aalto</td>
<td>PS</td>
<td>2015</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td>Roederer</td>
<td>Cristal</td>
<td>2009</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
</tbody>
</table>
<div class="submit-area ">
<button type="button" data-prototype-url="../preview/orders.html">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#clipboard-add" />
</svg>
<span>Create purchase orders</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
<label for="menu-trigger">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#menu" />
</svg>
Menu
</label>
</div>
</header>
<header id="header">
<div class="header-content">
<p class="main-title">
<a href="{{path '/components/preview/dashboard'}}" class="block-link">{{> @svg icon="logo-badge"}}Fine Wine Club</a>
</p>
</div>
<div class="header-content">
{{render '@shopping-list'}}
{{> @menu-trigger}}
</div>
</header>
/* No context defined. */
/**
* Header
*/
@media screen {
#header,
.header-content {
display: flex;
}
#header {
margin-top: 0;
justify-content: space-between;
align-items: center;
background-color: var(--primary);
color: var(--text-inverted);
padding: 0.5rem var(--gutter);
box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.2);
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 10;
}
.header-content {
margin-top: 0;
}
.header-content > * + * {
margin: 0 0 0 1em;
}
@supports(padding: max(0px)) {
#header {
padding-left: max(1rem, env(safe-area-inset-left));
padding-right: max(1rem, env(safe-area-inset-right));
}
}
/**
* Main title
*/
.main-title {
font-size: 1.2em;
}
.main-title .icon {
fill: currentColor;
transform: scale(1.6) translateY(-1px);
margin: 0 0.5em 0 0.25em;
}
/**
* Header links
*/
#header a {
color: currentColor;
text-decoration: none;
}
/**
* Triggers (used to activate menus)
*/
#header label {
cursor: pointer;
font-weight: 400;
}
}
This is the main header landmark on any page. It shall always include the logo which should either be linked to the start page for logged in users, or not linked at all for users who aren’t logged in.
See the different variants for examples of the different use cases.