{{! The phone menu uses the Popover API: no JavaScript, Escape and outside clicks close it. On wide screens the same <nav> shows inline (see style.css). Logo in the middle (ADR 0056): the site marks the item after which the first list ends (splitAfter) and sets split; the second list and the button then sit in .sv-site-header__end. A logo for dark backgrounds is shown instead of the logo where the header is dark. Search: an icon at the end of the menu (in the phone menu, a row that looks like a field) opens a full-screen search, a popover with a large field; view.js shows pages found as you type (the site's own REST search), Enter opens the results page (ADR 0057). A text link may come before the button (ADR 0057). The Classic header may have a top bar (ADR 0103): the footer's phone, email and social links (site values) and words of its own, in a color of its own. A color of their own for Classic and Floating (ADR 0107): --sv-custom-header on the header (never with Minimal's --sv-custom-pill). Minimal (ADR 0104): the menu in a pill (or each link in its own), placed by the logo, centered or by the button; the search, text link and button together at the end (.sv-site-header__actions, Minimal only). Signed in (ADR 0202): an add-on may fill `account` (+ `accountMenu`) for the visitor: their account link with a small drop-down in the text link's place; never stored, never on the canvas. }}
<header {{@attrs}}{{#sticky}} data-sticky="true"{{#stickyShadow}} data-shadow="true"{{/stickyShadow}}{{/sticky}}{{#overlay}} data-overlay="true"{{#overFrame}} style="{{overFrame}}{{#navLookCustom}};--sv-custom-pill:{{navLookCustom}}{{/navLookCustom}}{{#backgroundCustom}};--sv-custom-header:{{backgroundCustom}}{{/backgroundCustom}}"{{/overFrame}}{{/overlay}}{{#navLookCustom}}{{^overlay}} style="--sv-custom-pill:{{navLookCustom}}"{{/overlay}}{{#overlay}}{{^overFrame}} style="--sv-custom-pill:{{navLookCustom}}"{{/overFrame}}{{/overlay}}{{/navLookCustom}}{{#backgroundCustom}}{{^overlay}} style="--sv-custom-header:{{backgroundCustom}}"{{/overlay}}{{#overlay}}{{^overFrame}} style="--sv-custom-header:{{backgroundCustom}}"{{/overFrame}}{{/overlay}}{{/backgroundCustom}}{{#pageDark}} data-page="dark"{{/pageDark}}>{{#topBarOn}}<div class="sv-site-header__top sv-site-header__top--{{topLook}}"><div class="sv-site-header__top-inner"><div class="sv-site-header__top-contacts">{{#topPhone}}<a class="sv-site-header__top-link" href="tel:{{topPhone}}"><svg class="sv-site-header__top-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg><span class="sv-site-header__top-label">{{topPhone}}</span></a>{{/topPhone}}{{#topEmail}}<a class="sv-site-header__top-link" href="mailto:{{topEmail}}"><svg class="sv-site-header__top-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg><span class="sv-site-header__top-label">{{topEmail}}</span></a>{{/topEmail}}{{#topText}}<span class="sv-site-header__top-text">{{topText}}</span>{{/topText}}</div>{{#hasTopSocial}}<div class="sv-site-header__top-socials">{{#topSocial.facebook}}<a class="sv-site-header__top-social" href="{{topSocial.facebook}}" target="_blank" rel="noopener noreferrer" aria-label="Facebook"><svg class="sv-site-header__top-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg></a>{{/topSocial.facebook}}{{#topSocial.x}}<a class="sv-site-header__top-social" href="{{topSocial.x}}" target="_blank" rel="noopener noreferrer" aria-label="X"><svg class="sv-site-header__top-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 4h4.5L20 20h-4.5z"/><path d="m20 4-6.6 7.2"/><path d="m4 20 6.6-7.2"/></svg></a>{{/topSocial.x}}{{#topSocial.linkedin}}<a class="sv-site-header__top-social" href="{{topSocial.linkedin}}" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"><svg class="sv-site-header__top-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"/><path d="M2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg></a>{{/topSocial.linkedin}}{{#topSocial.youtube}}<a class="sv-site-header__top-social" href="{{topSocial.youtube}}" target="_blank" rel="noopener noreferrer" aria-label="YouTube"><svg class="sv-site-header__top-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M2.5 17a24 24 0 0 1 0-10 2 2 0 0 1 1.4-1.4 50 50 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24 24 0 0 1 0 10 2 2 0 0 1-1.4 1.4 50 50 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/></svg></a>{{/topSocial.youtube}}{{#topSocial.instagram}}<a class="sv-site-header__top-social" href="{{topSocial.instagram}}" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><svg class="sv-site-header__top-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.4A4 4 0 1 1 12.6 8 4 4 0 0 1 16 11.4z"/><path d="M17.5 6.5h.01"/></svg></a>{{/topSocial.instagram}}</div>{{/hasTopSocial}}</div></div>{{/topBarOn}}<div class="sv-site-header__inner"><a class="sv-site-header__brand" href="{{homeUrl}}" rel="home">{{#logo.url}}<img class="sv-site-header__logo" src="{{logo.url}}" alt="{{#logo.alt}}{{logo.alt}}{{/logo.alt}}{{^logo.alt}}{{siteName}}{{/logo.alt}}"{{#logo.width}} width="{{logo.width}}" height="{{logo.height}}"{{/logo.width}}>{{/logo.url}}{{#logoOnDark.url}}<img class="sv-site-header__logo sv-site-header__logo--on-dark" src="{{logoOnDark.url}}" alt="{{#logo.alt}}{{logo.alt}}{{/logo.alt}}{{^logo.alt}}{{siteName}}{{/logo.alt}}"{{#logoOnDark.width}} width="{{logoOnDark.width}}" height="{{logoOnDark.height}}"{{/logoOnDark.width}}>{{/logoOnDark.url}}{{#showName}}<span class="sv-site-header__name">{{siteName}}</span>{{/showName}}</a><button type="button" class="sv-site-header__toggle" popovertarget="sv-site-menu" aria-label="{{menuLabel}}"><span class="sv-site-header__bars" aria-hidden="true"></span></button><nav id="sv-site-menu" class="sv-site-header__nav" popover aria-label="{{menuLabel}}"><button type="button" class="sv-site-header__close" popovertarget="sv-site-menu" popovertargetaction="hide" aria-label="{{closeLabel}}"><span class="sv-site-header__bars" aria-hidden="true"></span></button><ul class="sv-site-header__menu">{{#menu}}<li class="sv-site-header__item{{#hasChildren}} sv-site-header__item--parent{{/hasChildren}}"><a class="sv-site-header__link" href="{{url}}"{{#current}} aria-current="page"{{/current}}{{#newTab}} target="_blank" rel="noopener noreferrer"{{/newTab}}>{{label}}</a>{{#hasChildren}}<ul class="sv-site-header__submenu">{{#children}}<li><a class="sv-site-header__link" href="{{url}}"{{#current}} aria-current="page"{{/current}}{{#newTab}} target="_blank" rel="noopener noreferrer"{{/newTab}}>{{label}}</a></li>{{/children}}</ul>{{/hasChildren}}</li>{{#splitAfter}}</ul><div class="sv-site-header__end"><ul class="sv-site-header__menu">{{/splitAfter}}{{/menu}}</ul>{{#pill}}<div class="sv-site-header__actions">{{/pill}}{{#search}}<button type="button" class="sv-site-header__search-toggle" popovertarget="sv-site-search" aria-label="{{searchLabel}}"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><span class="sv-site-header__search-text" aria-hidden="true">{{searchPlaceholder}}</span></button>{{/search}}{{#account.label}}<div class="sv-site-header__account{{#account.menu}} sv-site-header__account--menu{{/account.menu}}"><a class="sv-site-header__textlink sv-site-header__account-link" href="{{account.url}}"><span class="sv-site-header__avatar" aria-hidden="true">{{account.initial}}</span>{{account.label}}</a>{{#account.menu}}<ul class="sv-site-header__submenu sv-site-header__account-menu">{{#accountMenu}}<li><a class="sv-site-header__link" href="{{url}}">{{label}}</a></li>{{/accountMenu}}</ul>{{/account.menu}}</div>{{/account.label}}{{^account.label}}{{#textLink.label}}{{#textLink.link.url}}<a class="sv-site-header__textlink" href="{{textLink.link.url}}"{{#textLink.link.newTab}} target="_blank" rel="noopener noreferrer"{{/textLink.link.newTab}}>{{textLink.label}}</a>{{/textLink.link.url}}{{^textLink.link.url}}<span class="sv-site-header__textlink">{{textLink.label}}</span>{{/textLink.link.url}}{{/textLink.label}}{{/account.label}}{{#button.label}}<div class="sv-button sv-button--variant-primary sv-site-header__button">{{#button.link.url}}<a class="sv-button__control{{#button.arrow}} sv-button__control--arrow{{/button.arrow}}{{#button.icon}} sv-button__control--icon{{#button.iconEnd}} sv-button__control--icon-end{{/button.iconEnd}} sv-glyph-{{button.icon}}{{/button.icon}}" href="{{button.link.url}}"{{#button.link.newTab}} target="_blank" rel="noopener noreferrer"{{/button.link.newTab}}>{{button.label}}</a>{{/button.link.url}}{{^button.link.url}}<span class="sv-button__control{{#button.arrow}} sv-button__control--arrow{{/button.arrow}}{{#button.icon}} sv-button__control--icon{{#button.iconEnd}} sv-button__control--icon-end{{/button.iconEnd}} sv-glyph-{{button.icon}}{{/button.icon}}">{{button.label}}</span>{{/button.link.url}}</div>{{/button.label}}{{#pill}}</div>{{/pill}}{{#split}}</div>{{/split}}</nav></div>{{#search}}<div id="sv-site-search" class="sv-site-search" popover><button type="button" class="sv-site-header__close sv-site-search__close" popovertarget="sv-site-search" popovertargetaction="hide" aria-label="{{closeSearchLabel}}"><span class="sv-site-header__bars" aria-hidden="true"></span></button><form class="sv-site-search__form" role="search" action="{{homeUrl}}" method="get"><label class="sv-site-search__label" for="sv-site-search-field">{{searchLabel}}</label><div class="sv-site-search__row"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><input id="sv-site-search-field" class="sv-site-search__field" type="search" name="s" placeholder="{{searchPlaceholder}}" autocomplete="off" autofocus></div><p class="sv-site-search__hint">{{searchHint}}</p><div class="sv-site-search__results" aria-live="polite" data-empty="{{searchEmpty}}"></div></form></div>{{/search}}</header>