mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-05 15:28:25 -04:00
87 lines
4.0 KiB
Plaintext
87 lines
4.0 KiB
Plaintext
<header class="govuk-header {{ params.classes if params.classes }}" role="banner" data-module="header"
|
|
{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
|
<div class="govuk-header__container {{ params.containerClasses | default('govuk-width-container') }}">
|
|
|
|
<div class="govuk-header__logo">
|
|
<a href="{{ params.homepageUrl | default('/') }}" class="govuk-header__link govuk-header__link--homepage">
|
|
<span class="govuk-header__logotype">
|
|
{# We use an inline SVG for the crown so that we can cascade the
|
|
currentColor into the crown whilst continuing to support older browsers
|
|
which do not support external SVGs without a Javascript polyfill. This
|
|
adds approximately 1kb to every page load.
|
|
|
|
We use currentColour so that we can easily invert it when printing and
|
|
when the focus state is applied. This also benefits users who override
|
|
colours in their browser as they will still see the crown.
|
|
|
|
The SVG needs `focusable="false"` so that Internet Explorer does not
|
|
treat it as an interactive element - without this it will be
|
|
'focusable' when using the keyboard to navigate. #}
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="18"
|
|
viewBox="0 0 7410 3900">
|
|
<rect width="7410" height="3900" fill="#b22234" />
|
|
<path d="M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0" stroke="#fff" stroke-width="300" />
|
|
<rect width="2964" height="2100" fill="#3c3b6e" />
|
|
<g fill="#fff">
|
|
<g id="s18">
|
|
<g id="s9">
|
|
<g id="s5">
|
|
<g id="s4">
|
|
<path id="s"
|
|
d="M247,90 317.534230,307.082039 132.873218,172.917961H361.126782L176.465770,307.082039z" />
|
|
<use xlink:href="#s" y="420" />
|
|
<use xlink:href="#s" y="840" />
|
|
<use xlink:href="#s" y="1260" />
|
|
</g>
|
|
<use xlink:href="#s" y="1680" />
|
|
</g>
|
|
<use xlink:href="#s4" x="247" y="210" />
|
|
</g>
|
|
<use xlink:href="#s9" x="494" />
|
|
</g>
|
|
<use xlink:href="#s18" x="988" />
|
|
<use xlink:href="#s9" x="1976" />
|
|
<use xlink:href="#s5" x="2470" />
|
|
</g>
|
|
</svg>
|
|
<span class="govuk-header__logotype-text">
|
|
US
|
|
</span>
|
|
</span>
|
|
{% if (params.productName) %}
|
|
<span class="govuk-header__product-name">
|
|
{{ params.productName }}
|
|
</span>
|
|
{% endif %}
|
|
</a>
|
|
</div>
|
|
{% if params.serviceName or params.navigation %}
|
|
<div class="govuk-header__content">
|
|
|
|
{% if params.serviceName %}
|
|
<a href="{{ params.serviceUrl }}" class="govuk-header__link govuk-header__link--service-name">
|
|
{{ params.serviceName }}
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if params.navigation %}
|
|
<button type="button" role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
|
|
<nav>
|
|
<ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="Top Level Navigation">
|
|
{% for item in params.navigation %}
|
|
{% if item.href and item.text %}
|
|
<li class="govuk-header__navigation-item{{ ' govuk-header__navigation-item--active' if item.active }}">
|
|
<a class="govuk-header__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
|
{{ item.text }}
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
</nav>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</header>
|