<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">
<a href="../preview/login.html"><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#logout" />
</svg>
Log out</a>
</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">
<a href="{{path '/components/preview/login'}}">{{> @svg icon="logout"}} Log out</a>
</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.