Remove service name and navigation from Header component #6423
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-6423
JavaScript changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
index c88509283..61b98c577 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
@@ -838,41 +838,6 @@ FileUpload.moduleName = "govuk-file-upload", FileUpload.defaults = Object.freeze
}
}
});
-class Header extends Component {
- constructor(t) {
- super(t), this.$menuButton = void 0, this.$menu = void 0, this.menuIsOpen = !1, this.mql = null;
- const e = this.$root.querySelector(".govuk-js-header-toggle");
- if (!e) return this;
- this.$root.classList.add("govuk-header--with-js-navigation");
- const i = e.getAttribute("aria-controls");
- if (!i) throw new ElementError({
- component: Header,
- identifier: 'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'
- });
- const n = document.getElementById(i);
- if (!n) throw new ElementError({
- component: Header,
- element: n,
- identifier: `Navigation (\`<ul id="${i}">\`)`
- });
- this.$menu = n, this.$menuButton = e, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
- }
- setupResponsiveChecks() {
- const t = getBreakpoint("desktop");
- if (!t.value) throw new ElementError({
- component: Header,
- identifier: `CSS custom property (\`${t.property}\`) on pseudo-class \`:root\``
- });
- this.mql = window.matchMedia(`(min-width: ${t.value})`), "addEventListener" in this.mql ? this.mql.addEventListener("change", (() => this.checkMode())) : this.mql.addListener((() => this.checkMode())), this.checkMode()
- }
- checkMode() {
- this.mql && this.$menu && this.$menuButton && (this.mql.matches ? (this.$menu.removeAttribute("hidden"), this.$menuButton.setAttribute("hidden", "")) : (this.$menuButton.removeAttribute("hidden"), this.$menuButton.setAttribute("aria-expanded", this.menuIsOpen.toString()), this.menuIsOpen ? this.$menu.removeAttribute("hidden") : this.$menu.setAttribute("hidden", "")))
- }
- handleMenuButtonClick() {
- this.menuIsOpen = !this.menuIsOpen, this.checkMode()
- }
-}
-Header.moduleName = "govuk-header";
class NotificationBanner extends ConfigurableComponent {
constructor(t, e = {}) {
super(t, e), "alert" !== this.$root.getAttribute("role") || this.config.disableAutoFocus || setFocus(this.$root)
@@ -1213,7 +1178,6 @@ function initAll(t = {}) {
[ErrorSummary, e.errorSummary],
[ExitThisPage, e.exitThisPage],
[FileUpload, e.fileUpload],
- [Header],
[NotificationBanner, e.notificationBanner],
[PasswordInput, e.passwordInput],
[Radios],
@@ -1266,7 +1230,6 @@ export {
ErrorSummary,
ExitThisPage,
FileUpload,
- Header,
NotificationBanner,
PasswordInput,
Radios,
Action run for ef4380a |
Stylesheets changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 38176f700..ea76c48d0 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -3834,21 +3834,11 @@ screen and (forced-colors:active) {
background: #1d70b8
}
-@media (max-width:48.0525em) {
- .govuk-header--with-js-navigation .govuk-header__logo {
- padding-right: 80px
- }
-}
-
.govuk-header__container--full-width {
padding: 0 15px;
border-color: #1d70b8
}
-.govuk-header__container--full-width .govuk-header__menu-button {
- right: 15px
-}
-
.govuk-header__container {
position: relative;
margin-bottom: -10px;
@@ -3876,6 +3866,97 @@ screen and (forced-colors:active) {
border-bottom-color: transparent
}
+.govuk-header__logo {
+ box-sizing: border-box;
+ margin-bottom: 10px
+}
+
+@media (min-width:48.0625em) {
+ .govuk-header__logo {
+ width: 33.33%;
+ padding-right: 15px;
+ float: left;
+ vertical-align: top
+ }
+
+ .govuk-header__logo:last-child {
+ width: auto;
+ padding-right: 0;
+ float: none
+ }
+}
+
+.govuk-template--rebranded .govuk-header__logo {
+ margin-bottom: 0;
+ padding-top: 16px;
+ padding-bottom: 12px
+}
+
+.govuk-header__homepage-link {
+ display: inline-block;
+ margin-right: 10px;
+ font-size: 30px;
+ text-decoration: none
+}
+
+.govuk-header__homepage-link:link,
+.govuk-header__homepage-link:visited {
+ color: #fff
+}
+
+@media (min-width:48.0625em) {
+ .govuk-header__homepage-link {
+ display: inline
+ }
+}
+
+.govuk-header__homepage-link:link,
+.govuk-header__homepage-link:visited {
+ text-decoration: none
+}
+
+.govuk-header__homepage-link:active,
+.govuk-header__homepage-link:hover {
+ margin-bottom: -3px;
+ border-bottom: 3px solid
+}
+
+.govuk-header__homepage-link:hover {
+ text-decoration: underline;
+ text-decoration-thickness: 3px;
+ text-underline-offset: .1578em
+}
+
+.govuk-header__homepage-link:focus {
+ margin-bottom: 0;
+ border-bottom: 0;
+ outline: 3px solid transparent;
+ color: #0b0c0c;
+ background-color: #fd0;
+ box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+ text-decoration: none
+}
+
+@supports not (text-wrap:balance) {
+ .govuk-header__homepage-link:focus {
+ -webkit-box-decoration-break: clone;
+ box-decoration-break: clone
+ }
+}
+
+.govuk-template--rebranded .govuk-header__homepage-link {
+ display: inline;
+ word-spacing: -.375rem
+}
+
+.govuk-template--rebranded .govuk-header__homepage-link>* {
+ word-spacing: 0
+}
+
+.govuk-template--rebranded .govuk-header__homepage-link:not(:focus) {
+ background-color: #1d70b8
+}
+
.govuk-header__logotype {
display: inline-block;
position: relative;
@@ -3993,384 +4074,6 @@ screen and (forced-colors:active) {
}
}
-.govuk-header__link {
- text-decoration: none
-}
-
-.govuk-header__link:link,
-.govuk-header__link:visited {
- color: #fff
-}
-
-.govuk-header__link:hover {
- text-decoration: underline;
- text-decoration-thickness: 3px;
- text-underline-offset: .1578em
-}
-
-.govuk-header__link:focus {
- outline: 3px solid transparent;
- color: #0b0c0c;
- background-color: #fd0;
- box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
- text-decoration: none
-}
-
-@supports not (text-wrap:balance) {
- .govuk-header__link:focus {
- -webkit-box-decoration-break: clone;
- box-decoration-break: clone
- }
-}
-
-.govuk-header__link--homepage {
- display: inline-block;
- margin-right: 10px;
- font-size: 30px
-}
-
-@media (min-width:48.0625em) {
- .govuk-header__link--homepage {
- display: inline
- }
-}
-
-.govuk-header__link--homepage:link,
-.govuk-header__link--homepage:visited {
- text-decoration: none
-}
-
-.govuk-header__link--homepage:active,
-.govuk-header__link--homepage:hover {
- margin-bottom: -3px;
- border-bottom: 3px solid
-}
-
-.govuk-header__link--homepage:focus {
- margin-bottom: 0;
- border-bottom: 0
-}
-
-.govuk-template--rebranded .govuk-header__link--homepage {
- display: inline;
- word-spacing: -.375rem
-}
-
-.govuk-template--rebranded .govuk-header__link--homepage>* {
- word-spacing: 0
-}
-
-.govuk-template--rebranded .govuk-header__link--homepage:not(:focus) {
- background-color: #1d70b8
-}
-
-.govuk-header__service-name {
- display: inline-block;
- margin-bottom: 10px;
- font-size: 1.125rem;
- line-height: 1.1111111111;
- font-weight: 700
-}
-
-@media (min-width:40.0625em) {
- .govuk-header__service-name {
- font-size: 1.5rem;
- line-height: 1.25
- }
-}
-
-@media print {
- .govuk-header__service-name {
- font-size: 18pt;
- line-height: 1.15
- }
-}
-
-.govuk-template--rebranded .govuk-header__service-name {
- margin-bottom: 15px
-}
-
-@media (min-width:48.0625em) {
- .govuk-template--rebranded .govuk-header__service-name {
- margin: 19px 0 11px
- }
-}
-
-.govuk-header__content,
-.govuk-header__logo {
- box-sizing: border-box
-}
-
-.govuk-header__logo {
- margin-bottom: 10px
-}
-
-@media (min-width:48.0625em) {
- .govuk-header__logo {
- width: 33.33%;
- padding-right: 15px;
- float: left;
- vertical-align: top
- }
-
- .govuk-header__logo:last-child {
- width: auto;
- padding-right: 0;
- float: none
- }
-}
-
-.govuk-template--rebranded .govuk-header__logo {
- margin-bottom: 0;
- padding-top: 16px;
- padding-bottom: 12px
-}
-
-@media (min-width:48.0625em) {
- .govuk-header__content {
- width: 66.66%;
- padding-left: 15px;
- float: left
- }
-}
-
-.govuk-header__menu-button {
- font-family: GDS Transport, arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- font-weight: 400;
- font-size: .875rem;
- line-height: 1.1428571429;
- max-width: 80px;
- min-height: 24px;
- margin-bottom: 5px;
- padding: 0;
- border: 0;
- color: #fff;
- background: none;
- word-break: break-all;
- cursor: pointer
-}
-
-@media print {
- .govuk-header__menu-button {
- font-family: sans-serif
- }
-}
-
-@media (min-width:40.0625em) {
- .govuk-header__menu-button {
- font-size: 1rem;
- line-height: 1.25
- }
-}
-
-@media print {
- .govuk-header__menu-button {
- font-size: 14pt;
- line-height: 1.2
- }
-}
-
-.govuk-header__menu-button:hover {
- -webkit-text-decoration: solid underline 3px;
- text-decoration: solid underline 3px;
- text-underline-offset: .1578em
-}
-
-.govuk-header__menu-button:focus {
- outline: 3px solid transparent;
- color: #0b0c0c;
- background-color: #fd0;
- box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
- text-decoration: none
-}
-
-@supports not (text-wrap:balance) {
- .govuk-header__menu-button:focus {
- -webkit-box-decoration-break: clone;
- box-decoration-break: clone
- }
-}
-
-.govuk-header__menu-button:after {
- display: inline-block;
- width: 0;
- height: 0;
- -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
- clip-path: polygon(0 0, 50% 100%, 100% 0);
- border-color: transparent;
- border-style: solid;
- border-width: 8.66px 5px 0;
- border-top-color: inherit;
- content: "";
- margin-left: 5px
-}
-
-.govuk-header__menu-button[aria-expanded=true]:after {
- display: inline-block;
- width: 0;
- height: 0;
- -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
- clip-path: polygon(50% 0, 0 100%, 100% 100%);
- border-color: transparent;
- border-style: solid;
- border-width: 0 5px 8.66px;
- border-bottom-color: inherit
-}
-
-@media (min-width:20em) {
- .govuk-header__menu-button {
- position: absolute;
- top: 13px;
- right: 0;
- margin: 0
- }
-}
-
-@media (min-width:40.0625em) {
- .govuk-header__menu-button {
- top: 15px
- }
-}
-
-.govuk-frontend-supported .govuk-header__menu-button {
- display: block
-}
-
-.govuk-frontend-supported .govuk-header__menu-button[hidden],
-.govuk-header__menu-button[hidden] {
- display: none
-}
-
-@media (max-width:19.99em) {
- .govuk-template--rebranded .govuk-header__navigation {
- padding-bottom: 15px
- }
-}
-
-@media (min-width:48.0625em) {
- .govuk-header__navigation {
- margin-bottom: 10px
- }
-
- .govuk-template--rebranded .govuk-header__navigation {
- margin-bottom: 0;
- padding: 22px 0 8px
- }
-
- .govuk-template--rebranded .govuk-header__service-name+.govuk-header__navigation {
- padding-top: 0;
- padding-bottom: 15px
- }
-}
-
-.govuk-header__navigation-list {
- margin: 0;
- padding: 0;
- list-style: none
-}
-
-.govuk-header__navigation-list[hidden] {
- display: none
-}
-
-@media (min-width:20em) and (max-width:48.0525em) {
- .govuk-template--rebranded .govuk-header__navigation-list {
- padding-bottom: 15px
- }
-}
-
-@media (min-width:48.0625em) {
- .govuk-header__navigation--end {
- margin: 0;
- padding: 5px 0;
- text-align: right
- }
-}
-
-.govuk-header__navigation-item {
- padding: 10px 0;
- border-bottom: 1px solid #2e3133
-}
-
-@media (min-width:48.0625em) {
- .govuk-header__navigation-item {
- display: inline-block;
- margin-right: 15px;
- padding: 5px 0;
- border: 0
- }
-}
-
-.govuk-header__navigation-item a {
- font-size: .875rem;
- line-height: 1.1428571429;
- font-weight: 700;
- white-space: nowrap
-}
-
-@media (min-width:40.0625em) {
- .govuk-header__navigation-item a {
- font-size: 1rem;
- line-height: 1.25
- }
-}
-
-@media print {
- .govuk-header__navigation-item a {
- font-size: 14pt;
- line-height: 1.2
- }
-}
-
-.govuk-template--rebranded .govuk-header__navigation-item {
- padding-top: 15px;
- border-bottom-color: #fff
-}
-
-@media (min-width:48.0625em) {
- .govuk-template--rebranded .govuk-header__navigation-item {
- padding-top: 5px
- }
-}
-
-.govuk-template--rebranded .govuk-header__navigation-item a {
- font-weight: 400
-}
-
-.govuk-template--rebranded .govuk-header__navigation-item--active a {
- font-weight: 700
-}
-
-.govuk-header__navigation-item--active a:hover,
-.govuk-header__navigation-item--active a:link,
-.govuk-header__navigation-item--active a:visited {
- color: #1d8feb
-}
-
-.govuk-template--rebranded .govuk-header__navigation-item--active a:hover,
-.govuk-template--rebranded .govuk-header__navigation-item--active a:link,
-.govuk-template--rebranded .govuk-header__navigation-item--active a:visited {
- color: inherit
-}
-
-@media print {
- .govuk-header__navigation-item--active a {
- color: #1d70b8
- }
-}
-
-.govuk-header__navigation-item--active a:focus,
-.govuk-template--rebranded .govuk-header__navigation-item--active a:focus {
- color: #0b0c0c
-}
-
-.govuk-header__navigation-item:last-child {
- margin-right: 0;
- border-bottom: 0
-}
-
@media print {
.govuk-header {
border-bottom-width: 0;
@@ -4378,12 +4081,12 @@ screen and (forced-colors:active) {
background: transparent
}
- .govuk-header__link:link,
- .govuk-header__link:visited {
+ .govuk-header__homepage-link:link,
+ .govuk-header__homepage-link:visited {
color: #0b0c0c
}
- .govuk-header__link:after {
+ .govuk-header__homepage-link:after {
display: none
}
}
Action run for ef4380a |
Rendered HTML changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/header/template-default.html b/packages/govuk-frontend/dist/govuk/components/header/template-default.html
index e35a14c4c..00ca9f40c 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-default.html
@@ -1,7 +1,7 @@
-<header class="govuk-header" data-module="govuk-header">
+<header class="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
- <a href="//gov.uk" class="govuk-header__link govuk-header__link--homepage">
+ <a href="//gov.uk" class="govuk-header__homepage-link">
<svg
focusable="false"
role="img"
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-full-width-with-navigation.html b/packages/govuk-frontend/dist/govuk/components/header/template-full-width-with-navigation.html
deleted file mode 100644
index 14a032c81..000000000
--- a/packages/govuk-frontend/dist/govuk/components/header/template-full-width-with-navigation.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<header class="govuk-header" data-module="govuk-header">
- <div class="govuk-header__container govuk-header__container--full-width">
- <div class="govuk-header__logo">
- <a href="//gov.uk" class="govuk-header__link govuk-header__link--homepage">
- <svg
- focusable="false"
- role="img"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 296 60"
- height="30"
- width="148"
- fill="currentcolor" class="govuk-header__logotype" aria-label="GOV.UK"
- ><title>GOV.UK</title> <g>
- <circle cx="20" cy="17.6" r="3.7"/>
- <circle cx="10.2" cy="23.5" r="3.7"/>
- <circle cx="3.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <circle cx="43.3" cy="17.6" r="3.7"/>
- <circle cx="53.2" cy="23.5" r="3.7"/>
- <circle cx="59.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
- </g>
- <path d="M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z"/>
- </svg>
- </a>
- </div>
- <div class="govuk-header__content">
- <nav aria-label="Menu" class="govuk-header__navigation govuk-header__navigation--end">
- <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>
- Menu
- </button>
-
- <ul id="navigation" class="govuk-header__navigation-list">
- <li class="govuk-header__navigation-item govuk-header__navigation-item--active">
- <a class="govuk-header__link" href="#1">
- Navigation item 1
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#2">
- Navigation item 2
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#3">
- Navigation item 3
- </a>
- </li>
- </ul>
- </nav>
- </div>
- </div>
-</header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-full-width.html b/packages/govuk-frontend/dist/govuk/components/header/template-full-width.html
index e11c8273e..bdf1e3209 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-full-width.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-full-width.html
@@ -1,7 +1,7 @@
-<header class="govuk-header" data-module="govuk-header">
+<header class="govuk-header">
<div class="govuk-header__container govuk-header__container--full-width">
<div class="govuk-header__logo">
- <a href="//gov.uk" class="govuk-header__link govuk-header__link--homepage">
+ <a href="//gov.uk" class="govuk-header__homepage-link">
<svg
focusable="false"
role="img"
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-html.html b/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-html.html
deleted file mode 100644
index b09a1d2e0..000000000
--- a/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-html.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<header class="govuk-header" data-module="govuk-header">
- <div class="govuk-header__container govuk-width-container">
- <div class="govuk-header__logo">
- <a href="//gov.uk" class="govuk-header__link govuk-header__link--homepage">
- <svg
- focusable="false"
- role="img"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 296 60"
- height="30"
- width="148"
- fill="currentcolor" class="govuk-header__logotype" aria-label="GOV.UK"
- ><title>GOV.UK</title> <g>
- <circle cx="20" cy="17.6" r="3.7"/>
- <circle cx="10.2" cy="23.5" r="3.7"/>
- <circle cx="3.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <circle cx="43.3" cy="17.6" r="3.7"/>
- <circle cx="53.2" cy="23.5" r="3.7"/>
- <circle cx="59.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
- </g>
- <path d="M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z"/>
- </svg>
- </a>
- </div>
- <div class="govuk-header__content">
- <nav aria-label="Menu" class="govuk-header__navigation">
- <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>
- Menu
- </button>
-
- <ul id="navigation" class="govuk-header__navigation-list">
- <li class="govuk-header__navigation-item govuk-header__navigation-item--active">
- <a class="govuk-header__link" href="#1">
- <em>Navigation item 1</em>
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#2">
- <em>Navigation item 2</em>
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#3">
- <em>Navigation item 3</em>
- </a>
- </li>
- </ul>
- </nav>
- </div>
- </div>
-</header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-text-without-link.html b/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-text-without-link.html
deleted file mode 100644
index 57bd66b0f..000000000
--- a/packages/govuk-frontend/dist/govuk/components/header/template-navigation-item-with-text-without-link.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<header class="govuk-header" data-module="govuk-header">
- <div class="govuk-header__container govuk-width-container">
- <div class="govuk-header__logo">
- <a href="//gov.uk" class="govuk-header__link govuk-header__link--homepage">
- <svg
- focusable="false"
- role="img"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 296 60"
- height="30"
- width="148"
- fill="currentcolor" class="govuk-header__logotype" aria-label="GOV.UK"
- ><title>GOV.UK</title> <g>
- <circle cx="20" cy="17.6" r="3.7"/>
- <circle cx="10.2" cy="23.5" r="3.7"/>
- <circle cx="3.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <circle cx="43.3" cy="17.6" r="3.7"/>
- <circle cx="53.2" cy="23.5" r="3.7"/>
- <circle cx="59.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
- </g>
- <path d="M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z"/>
- </svg>
- </a>
- </div>
- <div class="govuk-header__content">
- <nav aria-label="Menu" class="govuk-header__navigation">
- <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>
- Menu
- </button>
-
- <ul id="navigation" class="govuk-header__navigation-list">
- <li class="govuk-header__navigation-item">
- Navigation item 1
- </li>
- <li class="govuk-header__navigation-item">
- Navigation item 2
- </li>
- <li class="govuk-header__navigation-item">
- Navigation item 3
- </li>
- </ul>
- </nav>
- </div>
- </div>
-</header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-text.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-text.html
deleted file mode 100644
index 1442f3e82..000000000
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-custom-menu-button-text.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<header class="govuk-header" data-module="govuk-header">
- <div class="govuk-header__container govuk-width-container">
- <div class="govuk-header__logo">
- <a href="//gov.uk" class="govuk-header__link govuk-header__link--homepage">
- <svg
- focusable="false"
- role="img"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 296 60"
- height="30"
- width="148"
- fill="currentcolor" class="govuk-header__logotype" aria-label="GOV.UK"
- ><title>GOV.UK</title> <g>
- <circle cx="20" cy="17.6" r="3.7"/>
- <circle cx="10.2" cy="23.5" r="3.7"/>
- <circle cx="3.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <circle cx="43.3" cy="17.6" r="3.7"/>
- <circle cx="53.2" cy="23.5" r="3.7"/>
- <circle cx="59.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
- </g>
- <path d="M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z"/>
- </svg>
- </a>
- </div>
- <div class="govuk-header__content">
- <nav aria-label="Dewislen" class="govuk-header__navigation">
- <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>
- Dewislen
- </button>
-
- <ul id="navigation" class="govuk-header__navigation-list">
- <li class="govuk-header__navigation-item govuk-header__navigation-item--active">
- <a class="govuk-header__link" href="#1">
- Eitem llywio 1
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#2">
- Eitem llywio 2
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#3">
- Eitem llywio 3
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#4">
- Eitem llywio 4
- </a>
- </li>
- </ul>
- </nav>
- </div>
- </div>
-</header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-full-width-border.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-full-width-border.html
index 3988320e7..55a9ee06a 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-full-width-border.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-full-width-border.html
@@ -1,7 +1,7 @@
-<header class="govuk-header govuk-header--full-width-border" data-module="govuk-header">
+<header class="govuk-header govuk-header--full-width-border">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
- <a href="//gov.uk" class="govuk-header__link govuk-header__link--homepage">
+ <a href="//gov.uk" class="govuk-header__homepage-link">
<svg
focusable="false"
role="img"
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-large-navigation.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-large-navigation.html
deleted file mode 100644
index 31d2932ef..000000000
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-large-navigation.html
+++ /dev/null
@@ -1,119 +0,0 @@
-<header class="govuk-header" data-module="govuk-header">
- <div class="govuk-header__container govuk-width-container">
- <div class="govuk-header__logo">
- <a href="//gov.uk" class="govuk-header__link govuk-header__link--homepage">
- <svg
- focusable="false"
- role="img"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 296 60"
- height="30"
- width="148"
- fill="currentcolor" class="govuk-header__logotype" aria-label="GOV.UK"
- ><title>GOV.UK</title> <g>
- <circle cx="20" cy="17.6" r="3.7"/>
- <circle cx="10.2" cy="23.5" r="3.7"/>
- <circle cx="3.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <circle cx="43.3" cy="17.6" r="3.7"/>
- <circle cx="53.2" cy="23.5" r="3.7"/>
- <circle cx="59.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
- </g>
- <path d="M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z"/>
- </svg>
- </a>
- </div>
- <div class="govuk-header__content">
- <nav aria-label="Menu" class="govuk-header__navigation">
- <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>
- Menu
- </button>
-
- <ul id="navigation" class="govuk-header__navigation-list">
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="/browse/benefits">
- Benefits
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="/browse/births-deaths-marriages">
- Births, deaths, marriages and care
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="/browse/business">
- Business and self-employed
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="/browse/childcare-parenting">
- Childcare and parenting
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="/browse/citizenship">
- Citizenship and living in the UK
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="/browse/justice">
- Crime, justice and the law
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="/browse/disabilities">
- Disabled people
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="/browse/driving">
- Driving and transport
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="/browse/education">
- Education and learning
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="/browse/employing-people">
- Employing people
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="/browse/environment-countryside">
- Environment and countryside
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="/browse/housing-local-services">
- Housing and local services
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="/browse/tax">
- Money and tax
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="/browse/abroad">
- Passports, travel and living abroad
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="/browse/visas-immigration">
- Visas and immigration
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="/browse/working">
- Working, jobs and pensions
- </a>
- </li>
- </ul>
- </nav>
- </div>
- </div>
-</header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-navigation.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-navigation.html
deleted file mode 100644
index 42634d4eb..000000000
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-navigation.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<header class="govuk-header" data-module="govuk-header">
- <div class="govuk-header__container govuk-width-container">
- <div class="govuk-header__logo">
- <a href="//gov.uk" class="govuk-header__link govuk-header__link--homepage">
- <svg
- focusable="false"
- role="img"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 296 60"
- height="30"
- width="148"
- fill="currentcolor" class="govuk-header__logotype" aria-label="GOV.UK"
- ><title>GOV.UK</title> <g>
- <circle cx="20" cy="17.6" r="3.7"/>
- <circle cx="10.2" cy="23.5" r="3.7"/>
- <circle cx="3.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <circle cx="43.3" cy="17.6" r="3.7"/>
- <circle cx="53.2" cy="23.5" r="3.7"/>
- <circle cx="59.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
- </g>
- <path d="M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z"/>
- </svg>
- </a>
- </div>
- <div class="govuk-header__content">
- <nav aria-label="Menu" class="govuk-header__navigation">
- <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>
- Menu
- </button>
-
- <ul id="navigation" class="govuk-header__navigation-list">
- <li class="govuk-header__navigation-item govuk-header__navigation-item--active">
- <a class="govuk-header__link" href="#1">
- Navigation item 1
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#2">
- Navigation item 2
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#3">
- Navigation item 3
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#4">
- Navigation item 4
- </a>
- </li>
- </ul>
- </nav>
- </div>
- </div>
-</header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-product-name.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-product-name.html
index 664e85082..e8a7c0521 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-product-name.html
+++ b/packages/govuk-frontend/dist/govuk/components/header/template-with-product-name.html
@@ -1,7 +1,7 @@
-<header class="govuk-header" data-module="govuk-header">
+<header class="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
- <a href="//gov.uk" class="govuk-header__link govuk-header__link--homepage">
+ <a href="//gov.uk" class="govuk-header__homepage-link">
<svg
focusable="false"
role="img"
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-and-navigation.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-and-navigation.html
deleted file mode 100644
index ad40acf88..000000000
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-and-navigation.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<header class="govuk-header" data-module="govuk-header">
- <div class="govuk-header__container govuk-width-container">
- <div class="govuk-header__logo">
- <a href="//gov.uk" class="govuk-header__link govuk-header__link--homepage">
- <svg
- focusable="false"
- role="img"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 296 60"
- height="30"
- width="148"
- fill="currentcolor" class="govuk-header__logotype" aria-label="GOV.UK"
- ><title>GOV.UK</title> <g>
- <circle cx="20" cy="17.6" r="3.7"/>
- <circle cx="10.2" cy="23.5" r="3.7"/>
- <circle cx="3.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <circle cx="43.3" cy="17.6" r="3.7"/>
- <circle cx="53.2" cy="23.5" r="3.7"/>
- <circle cx="59.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
- </g>
- <path d="M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z"/>
- </svg>
- </a>
- </div>
- <div class="govuk-header__content">
- <a href="/components/header" class="govuk-header__link govuk-header__service-name">
- Service Name
- </a>
- <nav aria-label="Menu" class="govuk-header__navigation">
- <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" hidden>
- Menu
- </button>
-
- <ul id="navigation" class="govuk-header__navigation-list">
- <li class="govuk-header__navigation-item govuk-header__navigation-item--active">
- <a class="govuk-header__link" href="#1">
- Navigation item 1
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#2">
- Navigation item 2
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#3">
- Navigation item 3
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#4">
- Navigation item 4
- </a>
- </li>
- </ul>
- </nav>
- </div>
- </div>
-</header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-but-no-service-url.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-but-no-service-url.html
deleted file mode 100644
index 98024def3..000000000
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name-but-no-service-url.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<header class="govuk-header" data-module="govuk-header">
- <div class="govuk-header__container govuk-width-container">
- <div class="govuk-header__logo">
- <a href="//gov.uk" class="govuk-header__link govuk-header__link--homepage">
- <svg
- focusable="false"
- role="img"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 296 60"
- height="30"
- width="148"
- fill="currentcolor" class="govuk-header__logotype" aria-label="GOV.UK"
- ><title>GOV.UK</title> <g>
- <circle cx="20" cy="17.6" r="3.7"/>
- <circle cx="10.2" cy="23.5" r="3.7"/>
- <circle cx="3.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <circle cx="43.3" cy="17.6" r="3.7"/>
- <circle cx="53.2" cy="23.5" r="3.7"/>
- <circle cx="59.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
- </g>
- <path d="M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z"/>
- </svg>
- </a>
- </div>
- <div class="govuk-header__content">
- <span class="govuk-header__service-name">
- Service Name
- </span>
- </div>
- </div>
-</header>
diff --git a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name.html b/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name.html
deleted file mode 100644
index 808afee8b..000000000
--- a/packages/govuk-frontend/dist/govuk/components/header/template-with-service-name.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<header class="govuk-header" data-module="govuk-header">
- <div class="govuk-header__container govuk-width-container">
- <div class="govuk-header__logo">
- <a href="//gov.uk" class="govuk-header__link govuk-header__link--homepage">
- <svg
- focusable="false"
- role="img"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 296 60"
- height="30"
- width="148"
- fill="currentcolor" class="govuk-header__logotype" aria-label="GOV.UK"
- ><title>GOV.UK</title> <g>
- <circle cx="20" cy="17.6" r="3.7"/>
- <circle cx="10.2" cy="23.5" r="3.7"/>
- <circle cx="3.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <circle cx="43.3" cy="17.6" r="3.7"/>
- <circle cx="53.2" cy="23.5" r="3.7"/>
- <circle cx="59.7" cy="33.2" r="3.7"/>
- <circle cx="31.7" cy="30.6" r="3.7"/>
- <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z"/>
- </g>
- <path d="M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z"/>
- </svg>
- </a>
- </div>
- <div class="govuk-header__content">
- <a href="/components/header" class="govuk-header__link govuk-header__service-name">
- Service Name
- </a>
- </div>
- </div>
-</header>
Action run for ef4380a |
Other changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/all.bundle.js b/packages/govuk-frontend/dist/govuk/all.bundle.js
index f030cdff5..a185518a3 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.js
@@ -1841,89 +1841,6 @@
* @import { TranslationPluralForms } from '../../i18n.mjs'
*/
- /**
- * Header component
- *
- * @preserve
- */
- class Header extends Component {
- /**
- * Apply a matchMedia for desktop which will trigger a state sync if the
- * browser viewport moves between states.
- *
- * @param {Element | null} $root - HTML element to use for header
- */
- constructor($root) {
- super($root);
- this.$menuButton = void 0;
- this.$menu = void 0;
- this.menuIsOpen = false;
- this.mql = null;
- const $menuButton = this.$root.querySelector('.govuk-js-header-toggle');
- if (!$menuButton) {
- return this;
- }
- this.$root.classList.add('govuk-header--with-js-navigation');
- const menuId = $menuButton.getAttribute('aria-controls');
- if (!menuId) {
- throw new ElementError({
- component: Header,
- identifier: 'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'
- });
- }
- const $menu = document.getElementById(menuId);
- if (!$menu) {
- throw new ElementError({
- component: Header,
- element: $menu,
- identifier: `Navigation (\`<ul id="${menuId}">\`)`
- });
- }
- this.$menu = $menu;
- this.$menuButton = $menuButton;
- this.setupResponsiveChecks();
- this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
- }
- setupResponsiveChecks() {
- const breakpoint = getBreakpoint('desktop');
- if (!breakpoint.value) {
- throw new ElementError({
- component: Header,
- identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
- });
- }
- this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`);
- if ('addEventListener' in this.mql) {
- this.mql.addEventListener('change', () => this.checkMode());
- } else {
- this.mql.addListener(() => this.checkMode());
- }
- this.checkMode();
- }
- checkMode() {
- if (!this.mql || !this.$menu || !this.$menuButton) {
- return;
- }
- if (this.mql.matches) {
- this.$menu.removeAttribute('hidden');
- this.$menuButton.setAttribute('hidden', '');
- } else {
- this.$menuButton.removeAttribute('hidden');
- this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
- if (this.menuIsOpen) {
- this.$menu.removeAttribute('hidden');
- } else {
- this.$menu.setAttribute('hidden', '');
- }
- }
- }
- handleMenuButtonClick() {
- this.menuIsOpen = !this.menuIsOpen;
- this.checkMode();
- }
- }
- Header.moduleName = 'govuk-header';
-
/**
* Notification Banner component
*
@@ -2627,7 +2544,7 @@
}
return;
}
- const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [FileUpload, config.fileUpload], [Header], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
+ const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [FileUpload, config.fileUpload], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
components.forEach(([Component, componentConfig]) => {
createAll(Component, componentConfig, options);
});
@@ -2760,7 +2677,6 @@
exports.ErrorSummary = ErrorSummary;
exports.ExitThisPage = ExitThisPage;
exports.FileUpload = FileUpload;
- exports.Header = Header;
exports.NotificationBanner = NotificationBanner;
exports.PasswordInput = PasswordInput;
exports.Radios = Radios;
diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.mjs b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
index 82431b278..e3bf09d22 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
@@ -1835,89 +1835,6 @@ function countFileItems(list) {
* @import { TranslationPluralForms } from '../../i18n.mjs'
*/
-/**
- * Header component
- *
- * @preserve
- */
-class Header extends Component {
- /**
- * Apply a matchMedia for desktop which will trigger a state sync if the
- * browser viewport moves between states.
- *
- * @param {Element | null} $root - HTML element to use for header
- */
- constructor($root) {
- super($root);
- this.$menuButton = void 0;
- this.$menu = void 0;
- this.menuIsOpen = false;
- this.mql = null;
- const $menuButton = this.$root.querySelector('.govuk-js-header-toggle');
- if (!$menuButton) {
- return this;
- }
- this.$root.classList.add('govuk-header--with-js-navigation');
- const menuId = $menuButton.getAttribute('aria-controls');
- if (!menuId) {
- throw new ElementError({
- component: Header,
- identifier: 'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'
- });
- }
- const $menu = document.getElementById(menuId);
- if (!$menu) {
- throw new ElementError({
- component: Header,
- element: $menu,
- identifier: `Navigation (\`<ul id="${menuId}">\`)`
- });
- }
- this.$menu = $menu;
- this.$menuButton = $menuButton;
- this.setupResponsiveChecks();
- this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
- }
- setupResponsiveChecks() {
- const breakpoint = getBreakpoint('desktop');
- if (!breakpoint.value) {
- throw new ElementError({
- component: Header,
- identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
- });
- }
- this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`);
- if ('addEventListener' in this.mql) {
- this.mql.addEventListener('change', () => this.checkMode());
- } else {
- this.mql.addListener(() => this.checkMode());
- }
- this.checkMode();
- }
- checkMode() {
- if (!this.mql || !this.$menu || !this.$menuButton) {
- return;
- }
- if (this.mql.matches) {
- this.$menu.removeAttribute('hidden');
- this.$menuButton.setAttribute('hidden', '');
- } else {
- this.$menuButton.removeAttribute('hidden');
- this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
- if (this.menuIsOpen) {
- this.$menu.removeAttribute('hidden');
- } else {
- this.$menu.setAttribute('hidden', '');
- }
- }
- }
- handleMenuButtonClick() {
- this.menuIsOpen = !this.menuIsOpen;
- this.checkMode();
- }
-}
-Header.moduleName = 'govuk-header';
-
/**
* Notification Banner component
*
@@ -2621,7 +2538,7 @@ function initAll(scopeOrConfig = {}) {
}
return;
}
- const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [FileUpload, config.fileUpload], [Header], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
+ const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [FileUpload, config.fileUpload], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
components.forEach(([Component, componentConfig]) => {
createAll(Component, componentConfig, options);
});
@@ -2745,5 +2662,5 @@ function createAll(Component, config, scopeOrOptions) {
* @property {OnErrorCallback<ComponentClass>} [onError] - callback function if error throw by component on init
*/
-export { Accordion, Button, CharacterCount, Checkboxes, Component, ConfigurableComponent, ErrorSummary, ExitThisPage, FileUpload, Header, NotificationBanner, PasswordInput, Radios, ServiceNavigation, SkipLink, Tabs, createAll, initAll, isSupported, version };
+export { Accordion, Button, CharacterCount, Checkboxes, Component, ConfigurableComponent, ErrorSummary, ExitThisPage, FileUpload, NotificationBanner, PasswordInput, Radios, ServiceNavigation, SkipLink, Tabs, createAll, initAll, isSupported, version };
//# sourceMappingURL=all.bundle.mjs.map
diff --git a/packages/govuk-frontend/dist/govuk/all.mjs b/packages/govuk-frontend/dist/govuk/all.mjs
index 01ef03347..acc574d91 100644
--- a/packages/govuk-frontend/dist/govuk/all.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.mjs
@@ -6,7 +6,6 @@ export { Checkboxes } from './components/checkboxes/checkboxes.mjs';
export { ErrorSummary } from './components/error-summary/error-summary.mjs';
export { ExitThisPage } from './components/exit-this-page/exit-this-page.mjs';
export { FileUpload } from './components/file-upload/file-upload.mjs';
-export { Header } from './components/header/header.mjs';
export { NotificationBanner } from './components/notification-banner/notification-banner.mjs';
export { PasswordInput } from './components/password-input/password-input.mjs';
export { Radios } from './components/radios/radios.mjs';
diff --git a/packages/govuk-frontend/dist/govuk/components/header/_index.scss b/packages/govuk-frontend/dist/govuk/components/header/_index.scss
index c346a6b32..950955a88 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/header/_index.scss
@@ -30,23 +30,9 @@
color: $govuk-header-text;
}
- .govuk-header--with-js-navigation {
- @media #{govuk-until-breakpoint(desktop)} {
- .govuk-header__logo {
- // Protect the absolute positioned menu button from overlapping with the
- // logo with right padding using the button's width
- padding-right: $govuk-header-menu-button-width;
- }
- }
- }
-
.govuk-header__container--full-width {
padding: 0 govuk-spacing(3);
border-color: $govuk-header-border-color;
-
- .govuk-header__menu-button {
- right: govuk-spacing(3);
- }
}
.govuk-header__container {
@@ -77,6 +63,102 @@
}
}
+ .govuk-header__logo {
+ box-sizing: border-box;
+ @include govuk-responsive-margin($govuk-header-vertical-spacing-value, "bottom");
+
+ @media #{govuk-from-breakpoint(desktop)} {
+ width: 33.33%;
+ padding-right: $govuk-gutter-half;
+ float: left;
+ vertical-align: top;
+
+ // Reset float when logo is the last child, without a navigation
+ &:last-child {
+ width: auto;
+ padding-right: 0;
+ float: none;
+ }
+ }
+
+ @include _govuk-rebrand {
+ // Apply margins to internal elements to emulate padding
+ margin-bottom: 0;
+
+ // Magic numbers, set padding to vertically centre align the logo
+ padding-top: 16px;
+ padding-bottom: 14px - $govuk-header-rebrand-logo-bottom-margin;
+ }
+ }
+
+ .govuk-header__homepage-link {
+ // Avoid using the `govuk-link-common` mixin because the links in the
+ // header get a special treatment, because:
+ //
+ // - underlines are only visible on hover
+ // - all links get a 3px underline regardless of text size, as there are
+ // multiple grouped elements close to one another and having slightly
+ // different underline widths looks unbalanced
+ //
+ // Font size needs to be set on the link so that the box sizing is correct
+ // in Firefox
+ display: inline-block;
+ margin-right: govuk-spacing(2);
+ font-size: 30px; // We don't have a mixin that produces 30px font size
+ text-decoration: none;
+ @include govuk-link-style-inverse;
+
+ @media #{govuk-from-breakpoint(desktop)} {
+ display: inline;
+ }
+
+ &:link,
+ &:visited {
+ text-decoration: none;
+ }
+
+ &:hover,
+ &:active {
+ // Negate the added border
+ margin-bottom: $govuk-header-link-underline-thickness * -1;
+ border-bottom: $govuk-header-link-underline-thickness solid;
+ }
+
+ &:hover {
+ text-decoration: underline;
+ text-decoration-thickness: $govuk-header-link-underline-thickness;
+
+ @if $govuk-link-underline-offset {
+ text-underline-offset: $govuk-link-underline-offset;
+ }
+ }
+
+ &:focus {
+ // Remove any borders that show when focused and hovered.
+ margin-bottom: 0;
+ border-bottom: 0;
+
+ @include govuk-focused-text;
+ }
+
+ @include _govuk-rebrand {
+ display: inline;
+
+ // Remove word-spacing from within the logo so we can ignore
+ // whitespace characters in the HTML
+ word-spacing: govuk-px-to-rem(-6px);
+
+ // Reset word-spacing for child elements
+ > * {
+ word-spacing: 0;
+ }
+
+ &:not(:focus) {
+ background-color: $govuk-header-rebrand-background;
+ }
+ }
+ }
+
.govuk-header__logotype {
display: inline-block;
position: relative;
@@ -194,336 +276,6 @@
}
}
- .govuk-header__link {
- // Avoid using the `govuk-link-common` mixin because the links in the header
- // get a special treatment, because:
- //
- // - underlines are only visible on hover
- // - all links get a 3px underline regardless of text size, as there are
- // multiple grouped elements close to one another and having slightly
- // different underline widths looks unbalanced
- @include govuk-link-style-inverse;
-
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- text-decoration-thickness: $govuk-header-link-underline-thickness;
-
- @if $govuk-link-underline-offset {
- text-underline-offset: $govuk-link-underline-offset;
- }
- }
-
- &:focus {
- @include govuk-focused-text;
- }
- }
-
- .govuk-header__link--homepage {
- // Font size needs to be set on the link so that the box sizing is correct
- // in Firefox
- display: inline-block;
- margin-right: govuk-spacing(2);
- font-size: 30px; // We don't have a mixin that produces 30px font size
-
- @media #{govuk-from-breakpoint(desktop)} {
- display: inline;
- }
-
- &:link,
- &:visited {
- text-decoration: none;
- }
-
- &:hover,
- &:active {
- // Negate the added border
- margin-bottom: $govuk-header-link-underline-thickness * -1;
- border-bottom: $govuk-header-link-underline-thickness solid;
- }
-
- // Remove any borders that show when focused and hovered.
- &:focus {
- margin-bottom: 0;
- border-bottom: 0;
- }
-
- @include _govuk-rebrand {
- display: inline;
-
- // Remove word-spacing from within the logo so we can ignore
- // whitespace characters in the HTML
- word-spacing: govuk-px-to-rem(-6px);
-
- // Reset word-spacing for child elements
- > * {
- word-spacing: 0;
- }
-
- &:not(:focus) {
- background-color: $govuk-header-rebrand-background;
- }
- }
- }
-
- .govuk-header__service-name {
- display: inline-block;
- margin-bottom: govuk-spacing(2);
- @include govuk-font-size($size: 24);
- @include govuk-typography-weight-bold;
-
- @include _govuk-rebrand {
- // Apply margins to internal elements to emulate padding
- margin-bottom: govuk-spacing(3);
-
- @media #{govuk-from-breakpoint(desktop)} {
- // Magic number to align service name baseline with the GOV.UK logo
- $service-name-offset: 4px;
-
- margin: (govuk-spacing(3) + $service-name-offset) 0 (govuk-spacing(3) - $service-name-offset);
- }
- }
- }
-
- .govuk-header__logo,
- .govuk-header__content {
- box-sizing: border-box;
- }
-
- .govuk-header__logo {
- @include govuk-responsive-margin($govuk-header-vertical-spacing-value, "bottom");
-
- @media #{govuk-from-breakpoint(desktop)} {
- width: 33.33%;
- padding-right: $govuk-gutter-half;
- float: left;
- vertical-align: top;
-
- // Reset float when logo is the last child, without a navigation
- &:last-child {
- width: auto;
- padding-right: 0;
- float: none;
- }
- }
-
- @include _govuk-rebrand {
- // Apply margins to internal elements to emulate padding
- margin-bottom: 0;
-
- // Magic numbers, set padding to vertically centre align the logo
- padding-top: 16px;
- padding-bottom: 14px - $govuk-header-rebrand-logo-bottom-margin;
- }
- }
-
- .govuk-header__content {
- @media #{govuk-from-breakpoint(desktop)} {
- width: 66.66%;
- padding-left: $govuk-gutter-half;
- float: left;
- }
- }
-
- .govuk-header__menu-button {
- @include govuk-font($size: 16);
- max-width: $govuk-header-menu-button-width;
- min-height: $govuk-header-menu-button-height;
- margin-bottom: govuk-spacing(1);
- padding: 0;
- border: 0;
- color: govuk-colour("white");
- background: none;
- word-break: break-all;
- cursor: pointer;
-
- &:hover {
- -webkit-text-decoration: solid underline $govuk-header-link-underline-thickness;
- text-decoration: solid underline $govuk-header-link-underline-thickness;
-
- @if $govuk-link-underline-offset {
- text-underline-offset: $govuk-link-underline-offset;
- }
- }
-
- &:focus {
- @include govuk-focused-text;
- }
-
- &::after {
- @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
- content: "";
- margin-left: govuk-spacing(1);
- }
-
- &[aria-expanded="true"]::after {
- @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
- }
-
- @media #{govuk-from-breakpoint(mobile)} {
- position: absolute;
- // calculate top offset by:
- // - getting the vertical spacing for the top and the bottom of the header
- // - adding that to the crown height
- // - dividing it by 2 so you have the vertical centre of the header
- // - subtracting half the height of the menu button
- top: (((govuk-spacing($govuk-header-vertical-spacing-value) * 2) + $govuk-header-crown-height) / 2) -
- ($govuk-header-menu-button-height / 2);
- right: 0;
- margin: 0;
- }
-
- @media #{govuk-from-breakpoint(tablet)} {
- top: govuk-spacing(3);
- }
-
- .govuk-frontend-supported & {
- display: block;
- }
-
- &[hidden],
- .govuk-frontend-supported &[hidden] {
- display: none;
- }
- }
-
- .govuk-header__navigation {
- @media #{govuk-until-breakpoint(mobile)} {
- @include _govuk-rebrand {
- padding-bottom: govuk-spacing(3);
- }
- }
-
- @media #{govuk-from-breakpoint(desktop)} {
- margin-bottom: govuk-spacing(2);
-
- @include _govuk-rebrand {
- // Magic number so that the bottom of the nav links aligns with the
- // baseline of the GOV.UK logo
- $navigation-offset: 7px;
-
- // Apply margins to internal elements to emulate padding
- margin-bottom: 0;
- padding: (govuk-spacing(3) + $navigation-offset) 0 (govuk-spacing(3) - $navigation-offset);
- }
- }
- }
-
- .govuk-header__service-name + .govuk-header__navigation {
- @include _govuk-rebrand {
- @media #{govuk-from-breakpoint(desktop)} {
- // If there's both a service name and navigation,
- // remove the extra padding between them on desktop
- padding-top: 0;
-
- // Restore the full bottom padding as the navigation isn't standalone
- padding-bottom: govuk-spacing(3);
- }
- }
- }
-
- .govuk-header__navigation-list {
- // Reset user-agent default list styles
- margin: 0;
- padding: 0;
- list-style: none;
-
- &[hidden] {
- display: none;
- }
-
- @include _govuk-rebrand {
- @media #{govuk-from-breakpoint(mobile)} and #{govuk-until-breakpoint(desktop)} {
- padding-bottom: govuk-spacing(3);
- }
- }
- }
-
- .govuk-header__navigation--end {
- @media #{govuk-from-breakpoint(desktop)} {
- margin: 0;
- padding: govuk-spacing(1) 0;
- text-align: right;
- }
- }
-
- .govuk-header__navigation-item {
- padding: govuk-spacing(2) 0;
- border-bottom: 1px solid $govuk-header-nav-item-border-color;
-
- @media #{govuk-from-breakpoint(desktop)} {
- display: inline-block;
- margin-right: govuk-spacing(3);
- padding: govuk-spacing(1) 0;
- border: 0;
- }
-
- a {
- @include govuk-font-size($size: 16);
- @include govuk-typography-weight-bold;
- white-space: nowrap;
- }
-
- @include _govuk-rebrand {
- // Increase top padding of nav items...
- padding-top: govuk-spacing(3);
-
- // ...except on desktop
- @media #{govuk-from-breakpoint(desktop)} {
- padding-top: govuk-spacing(1);
- }
-
- // Change the dividing line colour between mobile nav items
- border-bottom-color: govuk-colour("white");
-
- // Reduce default weight of links so that we can use bold for active ones
- a {
- @include govuk-typography-weight-regular;
- }
- }
- }
-
- .govuk-header__navigation-item--active {
- a {
- @include _govuk-rebrand {
- // Change active links to use bold text instead of changing colour
- @include govuk-typography-weight-bold;
- }
-
- &:link,
- &:hover,
- &:visited {
- color: $govuk-header-link-active;
-
- @include _govuk-rebrand {
- color: inherit;
- }
- }
-
- // When printing, use the normal blue as this contrasts better with the
- // white printing header
- @media print {
- color: govuk-applied-colour(brand);
- }
-
- // When focussed, the text colour needs to be darker to ensure that colour
- // contrast is still acceptable
- &:focus {
- color: govuk-applied-colour(focus-text);
-
- @include _govuk-rebrand {
- color: govuk-applied-colour(focus-text);
- }
- }
- }
- }
-
- .govuk-header__navigation-item:last-child {
- margin-right: 0;
- border-bottom: 0;
- }
-
@media print {
.govuk-header {
border-bottom-width: 0;
@@ -531,7 +283,7 @@
background: transparent;
}
- .govuk-header__link {
+ .govuk-header__homepage-link {
&:link,
&:visited {
color: govuk-colour("black");
diff --git a/packages/govuk-frontend/dist/govuk/components/header/fixtures.json b/packages/govuk-frontend/dist/govuk/components/header/fixtures.json
index dd8d79b3f..f6b8c69f0 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/header/fixtures.json
@@ -8,201 +8,7 @@
"description": "The standard header as used on information pages on GOV.UK",
"pageTemplateOptions": {},
"screenshot": true,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n </div>\n</header>"
- },
- {
- "name": "with service name",
- "options": {
- "serviceName": "Service Name",
- "serviceUrl": "/components/header"
- },
- "hidden": false,
- "description": "If your service is more than a few pages long, you can help users understand where they are by adding the service name.",
- "pageTemplateOptions": {},
- "screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n <div class=\"govuk-header__content\">\n <a href=\"/components/header\" class=\"govuk-header__link govuk-header__service-name\">\n Service Name\n </a>\n </div>\n </div>\n</header>"
- },
- {
- "name": "with service name but no service url",
- "options": {
- "serviceName": "Service Name"
- },
- "hidden": false,
- "description": "",
- "pageTemplateOptions": {},
- "screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n <div class=\"govuk-header__content\">\n <span class=\"govuk-header__service-name\">\n Service Name\n </span>\n </div>\n </div>\n</header>"
- },
- {
- "name": "with navigation",
- "options": {
- "navigation": [
- {
- "href": "#1",
- "text": "Navigation item 1",
- "active": true
- },
- {
- "href": "#2",
- "text": "Navigation item 2"
- },
- {
- "href": "#3",
- "text": "Navigation item 3"
- },
- {
- "href": "#4",
- "text": "Navigation item 4"
- }
- ]
- },
- "hidden": false,
- "description": "",
- "pageTemplateOptions": {},
- "screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n <div class=\"govuk-header__content\">\n <nav aria-label=\"Menu\" class=\"govuk-header__navigation\">\n <button type=\"button\" class=\"govuk-header__menu-button govuk-js-header-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul id=\"navigation\" class=\"govuk-header__navigation-list\">\n <li class=\"govuk-header__navigation-item govuk-header__navigation-item--active\">\n <a class=\"govuk-header__link\" href=\"#1\">\n Navigation item 1\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#2\">\n Navigation item 2\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#3\">\n Navigation item 3\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#4\">\n Navigation item 4\n </a>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n</header>"
- },
- {
- "name": "with custom menu button text",
- "options": {
- "menuButtonText": "Dewislen",
- "navigation": [
- {
- "href": "#1",
- "text": "Eitem llywio 1",
- "active": true
- },
- {
- "href": "#2",
- "text": "Eitem llywio 2"
- },
- {
- "href": "#3",
- "text": "Eitem llywio 3"
- },
- {
- "href": "#4",
- "text": "Eitem llywio 4"
- }
- ]
- },
- "hidden": false,
- "description": "Button translated into Welsh",
- "pageTemplateOptions": {},
- "screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n <div class=\"govuk-header__content\">\n <nav aria-label=\"Dewislen\" class=\"govuk-header__navigation\">\n <button type=\"button\" class=\"govuk-header__menu-button govuk-js-header-toggle\" aria-controls=\"navigation\" hidden>\n Dewislen\n </button>\n\n <ul id=\"navigation\" class=\"govuk-header__navigation-list\">\n <li class=\"govuk-header__navigation-item govuk-header__navigation-item--active\">\n <a class=\"govuk-header__link\" href=\"#1\">\n Eitem llywio 1\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#2\">\n Eitem llywio 2\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#3\">\n Eitem llywio 3\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#4\">\n Eitem llywio 4\n </a>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n</header>"
- },
- {
- "name": "with service name and navigation",
- "options": {
- "serviceName": "Service Name",
- "serviceUrl": "/components/header",
- "navigation": [
- {
- "href": "#1",
- "text": "Navigation item 1",
- "active": true
- },
- {
- "href": "#2",
- "text": "Navigation item 2"
- },
- {
- "href": "#3",
- "text": "Navigation item 3"
- },
- {
- "href": "#4",
- "text": "Navigation item 4"
- }
- ]
- },
- "hidden": false,
- "description": "If you need to include basic navigation, contact or account management links.",
- "pageTemplateOptions": {},
- "screenshot": {
- "variants": [
- "default",
- "no-js"
- ]
- },
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n <div class=\"govuk-header__content\">\n <a href=\"/components/header\" class=\"govuk-header__link govuk-header__service-name\">\n Service Name\n </a>\n <nav aria-label=\"Menu\" class=\"govuk-header__navigation\">\n <button type=\"button\" class=\"govuk-header__menu-button govuk-js-header-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul id=\"navigation\" class=\"govuk-header__navigation-list\">\n <li class=\"govuk-header__navigation-item govuk-header__navigation-item--active\">\n <a class=\"govuk-header__link\" href=\"#1\">\n Navigation item 1\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#2\">\n Navigation item 2\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#3\">\n Navigation item 3\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#4\">\n Navigation item 4\n </a>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n</header>"
- },
- {
- "name": "with large navigation",
- "options": {
- "navigation": [
- {
- "href": "/browse/benefits",
- "text": "Benefits"
- },
- {
- "href": "/browse/births-deaths-marriages",
- "text": "Births, deaths, marriages and care"
- },
- {
- "href": "/browse/business",
- "text": "Business and self-employed"
- },
- {
- "href": "/browse/childcare-parenting",
- "text": "Childcare and parenting"
- },
- {
- "href": "/browse/citizenship",
- "text": "Citizenship and living in the UK"
- },
- {
- "href": "/browse/justice",
- "text": "Crime, justice and the law"
- },
- {
- "href": "/browse/disabilities",
- "text": "Disabled people"
- },
- {
- "href": "/browse/driving",
- "text": "Driving and transport"
- },
- {
- "href": "/browse/education",
- "text": "Education and learning"
- },
- {
- "href": "/browse/employing-people",
- "text": "Employing people"
- },
- {
- "href": "/browse/environment-countryside",
- "text": "Environment and countryside"
- },
- {
- "href": "/browse/housing-local-services",
- "text": "Housing and local services"
- },
- {
- "href": "/browse/tax",
- "text": "Money and tax"
- },
- {
- "href": "/browse/abroad",
- "text": "Passports, travel and living abroad"
- },
- {
- "href": "/browse/visas-immigration",
- "text": "Visas and immigration"
- },
- {
- "href": "/browse/working",
- "text": "Working, jobs and pensions"
- }
- ]
- },
- "hidden": false,
- "description": "An edge case example with a large number of navigation items with long names used to test wrapping",
- "pageTemplateOptions": {},
- "screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n <div class=\"govuk-header__content\">\n <nav aria-label=\"Menu\" class=\"govuk-header__navigation\">\n <button type=\"button\" class=\"govuk-header__menu-button govuk-js-header-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul id=\"navigation\" class=\"govuk-header__navigation-list\">\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"/browse/benefits\">\n Benefits\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"/browse/births-deaths-marriages\">\n Births, deaths, marriages and care\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"/browse/business\">\n Business and self-employed\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"/browse/childcare-parenting\">\n Childcare and parenting\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"/browse/citizenship\">\n Citizenship and living in the UK\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"/browse/justice\">\n Crime, justice and the law\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"/browse/disabilities\">\n Disabled people\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"/browse/driving\">\n Driving and transport\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"/browse/education\">\n Education and learning\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"/browse/employing-people\">\n Employing people\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"/browse/environment-countryside\">\n Environment and countryside\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"/browse/housing-local-services\">\n Housing and local services\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"/browse/tax\">\n Money and tax\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"/browse/abroad\">\n Passports, travel and living abroad\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"/browse/visas-immigration\">\n Visas and immigration\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"/browse/working\">\n Working, jobs and pensions\n </a>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n</header>"
+ "html": "<header class=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__homepage-link\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n </div>\n</header>"
},
{
"name": "with product name",
@@ -213,46 +19,18 @@
"description": "",
"pageTemplateOptions": {},
"screenshot": true,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n <span class=\"govuk-header__product-name\">Product Name</span>\n </a>\n </div>\n </div>\n</header>"
+ "html": "<header class=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__homepage-link\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n <span class=\"govuk-header__product-name\">Product Name</span>\n </a>\n </div>\n </div>\n</header>"
},
{
"name": "full width",
"options": {
- "containerClasses": "govuk-header__container--full-width",
- "navigationClasses": "govuk-header__navigation--end"
+ "containerClasses": "govuk-header__container--full-width"
},
"hidden": false,
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-header__container--full-width\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n </div>\n</header>"
- },
- {
- "name": "full width with navigation",
- "options": {
- "containerClasses": "govuk-header__container--full-width",
- "navigationClasses": "govuk-header__navigation--end",
- "navigation": [
- {
- "href": "#1",
- "text": "Navigation item 1",
- "active": true
- },
- {
- "href": "#2",
- "text": "Navigation item 2"
- },
- {
- "href": "#3",
- "text": "Navigation item 3"
- }
- ]
- },
- "hidden": false,
- "description": "",
- "pageTemplateOptions": {},
- "screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-header__container--full-width\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n <div class=\"govuk-header__content\">\n <nav aria-label=\"Menu\" class=\"govuk-header__navigation govuk-header__navigation--end\">\n <button type=\"button\" class=\"govuk-header__menu-button govuk-js-header-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul id=\"navigation\" class=\"govuk-header__navigation-list\">\n <li class=\"govuk-header__navigation-item govuk-header__navigation-item--active\">\n <a class=\"govuk-header__link\" href=\"#1\">\n Navigation item 1\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#2\">\n Navigation item 2\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#3\">\n Navigation item 3\n </a>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n</header>"
+ "html": "<header class=\"govuk-header\">\n <div class=\"govuk-header__container govuk-header__container--full-width\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__homepage-link\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n </div>\n</header>"
},
{
"name": "with full width border",
@@ -263,53 +41,7 @@
"description": "Makes the header's bottom border full width without affecting the header's content. Removed with redesign.",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<header class=\"govuk-header govuk-header--full-width-border\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n </div>\n</header>"
- },
- {
- "name": "navigation item with html",
- "options": {
- "navigation": [
- {
- "href": "#1",
- "html": "<em>Navigation item 1</em>",
- "active": true
- },
- {
- "href": "#2",
- "html": "<em>Navigation item 2</em>"
- },
- {
- "href": "#3",
- "html": "<em>Navigation item 3</em>"
- }
- ]
- },
- "hidden": false,
- "description": "",
- "pageTemplateOptions": {},
- "screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n <div class=\"govuk-header__content\">\n <nav aria-label=\"Menu\" class=\"govuk-header__navigation\">\n <button type=\"button\" class=\"govuk-header__menu-button govuk-js-header-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul id=\"navigation\" class=\"govuk-header__navigation-list\">\n <li class=\"govuk-header__navigation-item govuk-header__navigation-item--active\">\n <a class=\"govuk-header__link\" href=\"#1\">\n <em>Navigation item 1</em>\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#2\">\n <em>Navigation item 2</em>\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#3\">\n <em>Navigation item 3</em>\n </a>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n</header>"
- },
- {
- "name": "navigation item with text without link",
- "options": {
- "navigation": [
- {
- "text": "Navigation item 1"
- },
- {
- "text": "Navigation item 2"
- },
- {
- "text": "Navigation item 3"
- }
- ]
- },
- "hidden": false,
- "description": "",
- "pageTemplateOptions": {},
- "screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n <div class=\"govuk-header__content\">\n <nav aria-label=\"Menu\" class=\"govuk-header__navigation\">\n <button type=\"button\" class=\"govuk-header__menu-button govuk-js-header-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul id=\"navigation\" class=\"govuk-header__navigation-list\">\n <li class=\"govuk-header__navigation-item\">\n Navigation item 1\n </li>\n <li class=\"govuk-header__navigation-item\">\n Navigation item 2\n </li>\n <li class=\"govuk-header__navigation-item\">\n Navigation item 3\n </li>\n </ul>\n </nav>\n </div>\n </div>\n</header>"
+ "html": "<header class=\"govuk-header govuk-header--full-width-border\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__homepage-link\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n </div>\n</header>"
},
{
"name": "attributes",
@@ -323,7 +55,7 @@
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\" data-test-attribute=\"value\" data-test-attribute-2=\"value-2\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n </div>\n</header>"
+ "html": "<header class=\"govuk-header\" data-test-attribute=\"value\" data-test-attribute-2=\"value-2\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__homepage-link\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n </div>\n</header>"
},
{
"name": "classes",
@@ -334,7 +66,7 @@
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<header class=\"govuk-header app-header--custom-modifier\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n </div>\n</header>"
+ "html": "<header class=\"govuk-header app-header--custom-modifier\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__homepage-link\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n </div>\n</header>"
},
{
"name": "custom homepage url",
@@ -345,180 +77,7 @@
"description": "",
"pageTemplateOptions": {},
"screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"/\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n </div>\n</header>"
- },
- {
- "name": "with custom navigation label",
- "options": {
- "navigationLabel": "Custom navigation label",
- "navigation": [
- {
- "href": "#1",
- "text": "Navigation item 1",
- "active": true
- },
- {
- "href": "#2",
- "text": "Navigation item 2"
- },
- {
- "href": "#3",
- "text": "Navigation item 3"
- },
- {
- "href": "#4",
- "text": "Navigation item 4"
- }
- ]
- },
- "hidden": true,
- "description": "",
- "pageTemplateOptions": {},
- "screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n <div class=\"govuk-header__content\">\n <nav aria-label=\"Custom navigation label\" class=\"govuk-header__navigation\">\n <button type=\"button\" class=\"govuk-header__menu-button govuk-js-header-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul id=\"navigation\" class=\"govuk-header__navigation-list\">\n <li class=\"govuk-header__navigation-item govuk-header__navigation-item--active\">\n <a class=\"govuk-header__link\" href=\"#1\">\n Navigation item 1\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#2\">\n Navigation item 2\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#3\">\n Navigation item 3\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#4\">\n Navigation item 4\n </a>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n</header>"
- },
- {
- "name": "navigation item with attributes",
- "options": {
- "navigation": [
- {
- "href": "/link",
- "text": "Item",
- "attributes": {
- "data-attribute": "my-attribute",
- "data-attribute-2": "my-attribute-2"
- }
- }
- ]
- },
- "hidden": true,
- "description": "",
- "pageTemplateOptions": {},
- "screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n <div class=\"govuk-header__content\">\n <nav aria-label=\"Menu\" class=\"govuk-header__navigation\">\n <button type=\"button\" class=\"govuk-header__menu-button govuk-js-header-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul id=\"navigation\" class=\"govuk-header__navigation-list\">\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"/link\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n Item\n </a>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n</header>"
- },
- {
- "name": "navigation item with html as text",
- "options": {
- "serviceName": "Service Name",
- "serviceUrl": "/components/header",
- "navigation": [
- {
- "href": "#1",
- "text": "<em>Navigation item 1</em>",
- "active": true
- },
- {
- "href": "#2",
- "text": "<em>Navigation item 2</em>"
- },
- {
- "href": "#3",
- "text": "<em>Navigation item 3</em>"
- }
- ]
- },
- "hidden": true,
- "description": "",
- "pageTemplateOptions": {},
- "screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n <div class=\"govuk-header__content\">\n <a href=\"/components/header\" class=\"govuk-header__link govuk-header__service-name\">\n Service Name\n </a>\n <nav aria-label=\"Menu\" class=\"govuk-header__navigation\">\n <button type=\"button\" class=\"govuk-header__menu-button govuk-js-header-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul id=\"navigation\" class=\"govuk-header__navigation-list\">\n <li class=\"govuk-header__navigation-item govuk-header__navigation-item--active\">\n <a class=\"govuk-header__link\" href=\"#1\">\n <em>Navigation item 1</em>\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#2\">\n <em>Navigation item 2</em>\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#3\">\n <em>Navigation item 3</em>\n </a>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n</header>"
- },
- {
- "name": "navigation item with html without link",
- "options": {
- "serviceName": "Service Name",
- "serviceUrl": "/components/header",
- "navigation": [
- {
- "html": "<em>Navigation item 1</em>",
- "active": true
- },
- {
- "html": "<em>Navigation item 2</em>"
- },
- {
- "html": "<em>Navigation item 3</em>"
- }
- ]
- },
- "hidden": true,
- "description": "",
- "pageTemplateOptions": {},
- "screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n <div class=\"govuk-header__content\">\n <a href=\"/components/header\" class=\"govuk-header__link govuk-header__service-name\">\n Service Name\n </a>\n <nav aria-label=\"Menu\" class=\"govuk-header__navigation\">\n <button type=\"button\" class=\"govuk-header__menu-button govuk-js-header-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul id=\"navigation\" class=\"govuk-header__navigation-list\">\n <li class=\"govuk-header__navigation-item govuk-header__navigation-item--active\">\n <em>Navigation item 1</em>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <em>Navigation item 2</em>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <em>Navigation item 3</em>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n</header>"
- },
- {
- "name": "with custom menu button label",
- "options": {
- "menuButtonLabel": "Custom button label",
- "navigation": [
- {
- "href": "#1",
- "text": "Navigation item 1",
- "active": true
- },
- {
- "href": "#2",
- "text": "Navigation item 2"
- },
- {
- "href": "#3",
- "text": "Navigation item 3"
- },
- {
- "href": "#4",
- "text": "Navigation item 4"
- }
- ]
- },
- "hidden": true,
- "description": "",
- "pageTemplateOptions": {},
- "screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n <div class=\"govuk-header__content\">\n <nav aria-label=\"Menu\" class=\"govuk-header__navigation\">\n <button type=\"button\" class=\"govuk-header__menu-button govuk-js-header-toggle\" aria-controls=\"navigation\" aria-label=\"Custom button label\" hidden>\n Menu\n </button>\n\n <ul id=\"navigation\" class=\"govuk-header__navigation-list\">\n <li class=\"govuk-header__navigation-item govuk-header__navigation-item--active\">\n <a class=\"govuk-header__link\" href=\"#1\">\n Navigation item 1\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#2\">\n Navigation item 2\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#3\">\n Navigation item 3\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#4\">\n Navigation item 4\n </a>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n</header>"
- },
- {
- "name": "with custom navigation label and custom menu button text",
- "options": {
- "menuButtonText": "Custom menu button text",
- "navigationLabel": "Custom navigation label",
- "navigation": [
- {
- "href": "#1",
- "text": "Navigation item 1",
- "active": true
- },
- {
- "href": "#2",
- "text": "Navigation item 2"
- },
- {
- "href": "#3",
- "text": "Navigation item 3"
- },
- {
- "href": "#4",
- "text": "Navigation item 4"
- }
- ]
- },
- "hidden": true,
- "description": "",
- "pageTemplateOptions": {},
- "screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n <div class=\"govuk-header__content\">\n <nav aria-label=\"Custom navigation label\" class=\"govuk-header__navigation\">\n <button type=\"button\" class=\"govuk-header__menu-button govuk-js-header-toggle\" aria-controls=\"navigation\" hidden>\n Custom menu button text\n </button>\n\n <ul id=\"navigation\" class=\"govuk-header__navigation-list\">\n <li class=\"govuk-header__navigation-item govuk-header__navigation-item--active\">\n <a class=\"govuk-header__link\" href=\"#1\">\n Navigation item 1\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#2\">\n Navigation item 2\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#3\">\n Navigation item 3\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#4\">\n Navigation item 4\n </a>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n</header>"
- },
- {
- "name": "empty navigation array",
- "options": {
- "navigation": []
- },
- "hidden": true,
- "description": "",
- "pageTemplateOptions": {},
- "screenshot": false,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n </div>\n</header>"
+ "html": "<header class=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"/\" class=\"govuk-header__homepage-link\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 296 60\"\n height=\"30\"\n width=\"148\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <path d=\"M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z\"/>\n </svg>\n </a>\n </div>\n </div>\n</header>"
},
{
"name": "rebrand",
@@ -531,46 +90,7 @@
"htmlClasses": "govuk-template--rebranded"
},
"screenshot": true,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 324 60\"\n height=\"30\"\n width=\"162\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <circle class=\"govuk-logo-dot\" cx=\"226\" cy=\"36\" r=\"7.3\"/>\n <path d=\"M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9\"/>\n </svg>\n </a>\n </div>\n </div>\n</header>"
- },
- {
- "name": "with service name and navigation and rebrand",
- "options": {
- "serviceName": "Service Name",
- "serviceUrl": "/components/header",
- "navigation": [
- {
- "href": "#1",
- "text": "Navigation item 1",
- "active": true
- },
- {
- "href": "#2",
- "text": "Navigation item 2"
- },
- {
- "href": "#3",
- "text": "Navigation item 3"
- },
- {
- "href": "#4",
- "text": "Navigation item 4"
- }
- ],
- "rebrand": true
- },
- "hidden": true,
- "description": "If you need to include basic navigation, contact or account management links.",
- "pageTemplateOptions": {
- "htmlClasses": "govuk-template--rebranded"
- },
- "screenshot": {
- "variants": [
- "default",
- "no-js"
- ]
- },
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 324 60\"\n height=\"30\"\n width=\"162\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <circle class=\"govuk-logo-dot\" cx=\"226\" cy=\"36\" r=\"7.3\"/>\n <path d=\"M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9\"/>\n </svg>\n </a>\n </div>\n <div class=\"govuk-header__content\">\n <a href=\"/components/header\" class=\"govuk-header__link govuk-header__service-name\">\n Service Name\n </a>\n <nav aria-label=\"Menu\" class=\"govuk-header__navigation\">\n <button type=\"button\" class=\"govuk-header__menu-button govuk-js-header-toggle\" aria-controls=\"navigation\" hidden>\n Menu\n </button>\n\n <ul id=\"navigation\" class=\"govuk-header__navigation-list\">\n <li class=\"govuk-header__navigation-item govuk-header__navigation-item--active\">\n <a class=\"govuk-header__link\" href=\"#1\">\n Navigation item 1\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#2\">\n Navigation item 2\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#3\">\n Navigation item 3\n </a>\n </li>\n <li class=\"govuk-header__navigation-item\">\n <a class=\"govuk-header__link\" href=\"#4\">\n Navigation item 4\n </a>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n</header>"
+ "html": "<header class=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__homepage-link\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 324 60\"\n height=\"30\"\n width=\"162\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <circle class=\"govuk-logo-dot\" cx=\"226\" cy=\"36\" r=\"7.3\"/>\n <path d=\"M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9\"/>\n </svg>\n </a>\n </div>\n </div>\n</header>"
},
{
"name": "with product name and rebrand",
@@ -584,7 +104,7 @@
"htmlClasses": "govuk-template--rebranded"
},
"screenshot": true,
- "html": "<header class=\"govuk-header\" data-module=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__link govuk-header__link--homepage\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 324 60\"\n height=\"30\"\n width=\"162\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <circle class=\"govuk-logo-dot\" cx=\"226\" cy=\"36\" r=\"7.3\"/>\n <path d=\"M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9\"/>\n </svg>\n <span class=\"govuk-header__product-name\">Product Name</span>\n </a>\n </div>\n </div>\n</header>"
+ "html": "<header class=\"govuk-header\">\n <div class=\"govuk-header__container govuk-width-container\">\n <div class=\"govuk-header__logo\">\n <a href=\"//gov.uk\" class=\"govuk-header__homepage-link\">\n <svg\n focusable=\"false\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 324 60\"\n height=\"30\"\n width=\"162\"\n fill=\"currentcolor\" class=\"govuk-header__logotype\" aria-label=\"GOV.UK\"\n ><title>GOV.UK</title> <g>\n <circle cx=\"20\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"10.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"3.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <circle cx=\"43.3\" cy=\"17.6\" r=\"3.7\"/>\n <circle cx=\"53.2\" cy=\"23.5\" r=\"3.7\"/>\n <circle cx=\"59.7\" cy=\"33.2\" r=\"3.7\"/>\n <circle cx=\"31.7\" cy=\"30.6\" r=\"3.7\"/>\n <path d=\"M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z\"/>\n </g>\n <circle class=\"govuk-logo-dot\" cx=\"226\" cy=\"36\" r=\"7.3\"/>\n <path d=\"M93.94 41.25c.4 1.81 1.2 3.21 2.21 4.62 1 1.4 2.21 2.41 3.61 3.21s3.21 1.2 5.22 1.2 3.61-.4 4.82-1c1.4-.6 2.41-1.4 3.21-2.41.8-1 1.4-2.01 1.61-3.01s.4-2.01.4-3.01v.14h-10.86v-7.02h20.07v24.08h-8.03v-5.56c-.6.8-1.38 1.61-2.19 2.41-.8.8-1.81 1.2-2.81 1.81-1 .4-2.21.8-3.41 1.2s-2.41.4-3.81.4a18.56 18.56 0 0 1-14.65-6.63c-1.6-2.01-3.01-4.41-3.81-7.02s-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83a20.45 20.45 0 0 1 19.46-13.65c3.21 0 4.01.2 5.82.8 1.81.4 3.61 1.2 5.02 2.01 1.61.8 2.81 2.01 4.01 3.21s2.21 2.61 2.81 4.21l-7.63 4.41c-.4-1-1-1.81-1.61-2.61-.6-.8-1.4-1.4-2.21-2.01-.8-.6-1.81-1-2.81-1.4-1-.4-2.21-.4-3.61-.4-2.01 0-3.81.4-5.22 1.2-1.4.8-2.61 1.81-3.61 3.21s-1.61 2.81-2.21 4.62c-.4 1.81-.6 3.71-.6 5.42s.8 5.22.8 5.22Zm57.8-27.9c3.21 0 6.22.6 8.63 1.81 2.41 1.2 4.82 2.81 6.62 4.82S170.2 24.39 171 27s1.4 5.62 1.4 8.83-.4 6.02-1.4 8.83-2.41 5.02-4.01 7.02-4.01 3.61-6.62 4.82-5.42 1.81-8.63 1.81-6.22-.6-8.63-1.81-4.82-2.81-6.42-4.82-3.21-4.41-4.01-7.02-1.4-5.62-1.4-8.83.4-6.02 1.4-8.83 2.41-5.02 4.01-7.02 4.01-3.61 6.42-4.82 5.42-1.81 8.63-1.81Zm0 36.73c1.81 0 3.61-.4 5.02-1s2.61-1.81 3.61-3.01 1.81-2.81 2.21-4.41c.4-1.81.8-3.61.8-5.62 0-2.21-.2-4.21-.8-6.02s-1.2-3.21-2.21-4.62c-1-1.2-2.21-2.21-3.61-3.01s-3.21-1-5.02-1-3.61.4-5.02 1c-1.4.8-2.61 1.81-3.61 3.01s-1.81 2.81-2.21 4.62c-.4 1.81-.8 3.61-.8 5.62 0 2.41.2 4.21.8 6.02.4 1.81 1.2 3.21 2.21 4.41s2.21 2.21 3.61 3.01c1.4.8 3.21 1 5.02 1Zm36.32 7.96-12.24-44.15h9.83l8.43 32.77h.4l8.23-32.77h9.83L200.3 58.04h-12.24Zm74.14-7.96c2.18 0 3.51-.6 3.51-.6 1.2-.6 2.01-1 2.81-1.81s1.4-1.81 1.81-2.81a13 13 0 0 0 .8-4.01V13.9h8.63v28.15c0 2.41-.4 4.62-1.4 6.62-.8 2.01-2.21 3.61-3.61 5.02s-3.41 2.41-5.62 3.21-4.62 1.2-7.02 1.2-5.02-.4-7.02-1.2c-2.21-.8-4.01-1.81-5.62-3.21s-2.81-3.01-3.61-5.02-1.4-4.21-1.4-6.62V13.9h8.63v26.95c0 1.61.2 3.01.8 4.01.4 1.2 1.2 2.21 2.01 2.81.8.8 1.81 1.4 2.81 1.81 0 0 1.34.6 3.51.6Zm34.22-36.18v18.92l15.65-18.92h10.82l-15.03 17.32 16.03 26.83h-10.21l-11.44-20.21-5.62 6.22v13.99h-8.83V13.9\"/>\n </svg>\n <span class=\"govuk-header__product-name\">Product Name</span>\n </a>\n </div>\n </div>\n</header>"
}
],
"previewLayout": "full-width"
diff --git a/packages/govuk-frontend/dist/govuk/components/header/header.bundle.js b/packages/govuk-frontend/dist/govuk/components/header/header.bundle.js
deleted file mode 100644
index ff01fd562..000000000
--- a/packages/govuk-frontend/dist/govuk/components/header/header.bundle.js
+++ /dev/null
@@ -1,238 +0,0 @@
-(function (global, factory) {
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
- typeof define === 'function' && define.amd ? define(['exports'], factory) :
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.GOVUKFrontend = global.GOVUKFrontend || {}));
-})(this, (function (exports) { 'use strict';
-
- function getBreakpoint(name) {
- const property = `--govuk-breakpoint-${name}`;
- const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
- return {
- property,
- value: value || undefined
- };
- }
- function isInitialised($root, moduleName) {
- return $root instanceof HTMLElement && $root.hasAttribute(`data-${moduleName}-init`);
- }
-
- /**
- * Checks if GOV.UK Frontend is supported on this page
- *
- * Some browsers will load and run our JavaScript but GOV.UK Frontend
- * won't be supported.
- *
- * @param {HTMLElement | null} [$scope] - (internal) `<body>` HTML element checked for browser support
- * @returns {boolean} Whether GOV.UK Frontend is supported on this page
- */
- function isSupported($scope = document.body) {
- if (!$scope) {
- return false;
- }
- return $scope.classList.contains('govuk-frontend-supported');
- }
- function isArray(option) {
- return Array.isArray(option);
- }
- function isObject(option) {
- return !!option && typeof option === 'object' && !isArray(option);
- }
- function formatErrorMessage(Component, message) {
- return `${Component.moduleName}: ${message}`;
- }
- /**
- * @typedef ComponentWithModuleName
- * @property {string} moduleName - Name of the component
- */
-
- class GOVUKFrontendError extends Error {
- constructor(...args) {
- super(...args);
- this.name = 'GOVUKFrontendError';
- }
- }
- class SupportError extends GOVUKFrontendError {
- /**
- * Checks if GOV.UK Frontend is supported on this page
- *
- * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
- */
- constructor($scope = document.body) {
- const supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';
- super($scope ? supportMessage : 'GOV.UK Frontend initialised without `<script type="module">`');
- this.name = 'SupportError';
- }
- }
- class ElementError extends GOVUKFrontendError {
- constructor(messageOrOptions) {
- let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
- if (isObject(messageOrOptions)) {
- const {
- component,
- identifier,
- element,
- expectedType
- } = messageOrOptions;
- message = identifier;
- message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
- if (component) {
- message = formatErrorMessage(component, message);
- }
- }
- super(message);
- this.name = 'ElementError';
- }
- }
- class InitError extends GOVUKFrontendError {
- constructor(componentOrMessage) {
- const message = typeof componentOrMessage === 'string' ? componentOrMessage : formatErrorMessage(componentOrMessage, `Root element (\`$root\`) already initialised`);
- super(message);
- this.name = 'InitError';
- }
- }
- /**
- * @import { ComponentWithModuleName } from '../common/index.mjs'
- */
-
- class Component {
- /**
- * Returns the root element of the component
- *
- * @protected
- * @returns {RootElementType} - the root element of component
- */
- get $root() {
- return this._$root;
- }
- constructor($root) {
- this._$root = void 0;
- const childConstructor = this.constructor;
- if (typeof childConstructor.moduleName !== 'string') {
- throw new InitError(`\`moduleName\` not defined in component`);
- }
- if (!($root instanceof childConstructor.elementType)) {
- throw new ElementError({
- element: $root,
- component: childConstructor,
- identifier: 'Root element (`$root`)',
- expectedType: childConstructor.elementType.name
- });
- } else {
- this._$root = $root;
- }
- childConstructor.checkSupport();
- this.checkInitialised();
- const moduleName = childConstructor.moduleName;
- this.$root.setAttribute(`data-${moduleName}-init`, '');
- }
- checkInitialised() {
- const constructor = this.constructor;
- const moduleName = constructor.moduleName;
- if (moduleName && isInitialised(this.$root, moduleName)) {
- throw new InitError(constructor);
- }
- }
- static checkSupport() {
- if (!isSupported()) {
- throw new SupportError();
- }
- }
- }
-
- /**
- * @typedef ChildClass
- * @property {string} moduleName - The module name that'll be looked for in the DOM when initialising the component
- */
-
- /**
- * @typedef {typeof Component & ChildClass} ChildClassConstructor
- */
- Component.elementType = HTMLElement;
-
- /**
- * Header component
- *
- * @preserve
- */
- class Header extends Component {
- /**
- * Apply a matchMedia for desktop which will trigger a state sync if the
- * browser viewport moves between states.
- *
- * @param {Element | null} $root - HTML element to use for header
- */
- constructor($root) {
- super($root);
- this.$menuButton = void 0;
- this.$menu = void 0;
- this.menuIsOpen = false;
- this.mql = null;
- const $menuButton = this.$root.querySelector('.govuk-js-header-toggle');
- if (!$menuButton) {
- return this;
- }
- this.$root.classList.add('govuk-header--with-js-navigation');
- const menuId = $menuButton.getAttribute('aria-controls');
- if (!menuId) {
- throw new ElementError({
- component: Header,
- identifier: 'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'
- });
- }
- const $menu = document.getElementById(menuId);
- if (!$menu) {
- throw new ElementError({
- component: Header,
- element: $menu,
- identifier: `Navigation (\`<ul id="${menuId}">\`)`
- });
- }
- this.$menu = $menu;
- this.$menuButton = $menuButton;
- this.setupResponsiveChecks();
- this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
- }
- setupResponsiveChecks() {
- const breakpoint = getBreakpoint('desktop');
- if (!breakpoint.value) {
- throw new ElementError({
- component: Header,
- identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
- });
- }
- this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`);
- if ('addEventListener' in this.mql) {
- this.mql.addEventListener('change', () => this.checkMode());
- } else {
- this.mql.addListener(() => this.checkMode());
- }
- this.checkMode();
- }
- checkMode() {
- if (!this.mql || !this.$menu || !this.$menuButton) {
- return;
- }
- if (this.mql.matches) {
- this.$menu.removeAttribute('hidden');
- this.$menuButton.setAttribute('hidden', '');
- } else {
- this.$menuButton.removeAttribute('hidden');
- this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
- if (this.menuIsOpen) {
- this.$menu.removeAttribute('hidden');
- } else {
- this.$menu.setAttribute('hidden', '');
- }
- }
- }
- handleMenuButtonClick() {
- this.menuIsOpen = !this.menuIsOpen;
- this.checkMode();
- }
- }
- Header.moduleName = 'govuk-header';
-
- exports.Header = Header;
-
-}));
-//# sourceMappingURL=header.bundle.js.map
diff --git a/packages/govuk-frontend/dist/govuk/components/header/header.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/header/header.bundle.mjs
deleted file mode 100644
index 12d626ecf..000000000
--- a/packages/govuk-frontend/dist/govuk/components/header/header.bundle.mjs
+++ /dev/null
@@ -1,230 +0,0 @@
-function getBreakpoint(name) {
- const property = `--govuk-breakpoint-${name}`;
- const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);
- return {
- property,
- value: value || undefined
- };
-}
-function isInitialised($root, moduleName) {
- return $root instanceof HTMLElement && $root.hasAttribute(`data-${moduleName}-init`);
-}
-
-/**
- * Checks if GOV.UK Frontend is supported on this page
- *
- * Some browsers will load and run our JavaScript but GOV.UK Frontend
- * won't be supported.
- *
- * @param {HTMLElement | null} [$scope] - (internal) `<body>` HTML element checked for browser support
- * @returns {boolean} Whether GOV.UK Frontend is supported on this page
- */
-function isSupported($scope = document.body) {
- if (!$scope) {
- return false;
- }
- return $scope.classList.contains('govuk-frontend-supported');
-}
-function isArray(option) {
- return Array.isArray(option);
-}
-function isObject(option) {
- return !!option && typeof option === 'object' && !isArray(option);
-}
-function formatErrorMessage(Component, message) {
- return `${Component.moduleName}: ${message}`;
-}
-/**
- * @typedef ComponentWithModuleName
- * @property {string} moduleName - Name of the component
- */
-
-class GOVUKFrontendError extends Error {
- constructor(...args) {
- super(...args);
- this.name = 'GOVUKFrontendError';
- }
-}
-class SupportError extends GOVUKFrontendError {
- /**
- * Checks if GOV.UK Frontend is supported on this page
- *
- * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
- */
- constructor($scope = document.body) {
- const supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class="govuk-frontend-supported">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';
- super($scope ? supportMessage : 'GOV.UK Frontend initialised without `<script type="module">`');
- this.name = 'SupportError';
- }
-}
-class ElementError extends GOVUKFrontendError {
- constructor(messageOrOptions) {
- let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';
- if (isObject(messageOrOptions)) {
- const {
- component,
- identifier,
- element,
- expectedType
- } = messageOrOptions;
- message = identifier;
- message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';
- if (component) {
- message = formatErrorMessage(component, message);
- }
- }
- super(message);
- this.name = 'ElementError';
- }
-}
-class InitError extends GOVUKFrontendError {
- constructor(componentOrMessage) {
- const message = typeof componentOrMessage === 'string' ? componentOrMessage : formatErrorMessage(componentOrMessage, `Root element (\`$root\`) already initialised`);
- super(message);
- this.name = 'InitError';
- }
-}
-/**
- * @import { ComponentWithModuleName } from '../common/index.mjs'
- */
-
-class Component {
- /**
- * Returns the root element of the component
- *
- * @protected
- * @returns {RootElementType} - the root element of component
- */
- get $root() {
- return this._$root;
- }
- constructor($root) {
- this._$root = void 0;
- const childConstructor = this.constructor;
- if (typeof childConstructor.moduleName !== 'string') {
- throw new InitError(`\`moduleName\` not defined in component`);
- }
- if (!($root instanceof childConstructor.elementType)) {
- throw new ElementError({
- element: $root,
- component: childConstructor,
- identifier: 'Root element (`$root`)',
- expectedType: childConstructor.elementType.name
- });
- } else {
- this._$root = $root;
- }
- childConstructor.checkSupport();
- this.checkInitialised();
- const moduleName = childConstructor.moduleName;
- this.$root.setAttribute(`data-${moduleName}-init`, '');
- }
- checkInitialised() {
- const constructor = this.constructor;
- const moduleName = constructor.moduleName;
- if (moduleName && isInitialised(this.$root, moduleName)) {
- throw new InitError(constructor);
- }
- }
- static checkSupport() {
- if (!isSupported()) {
- throw new SupportError();
- }
- }
-}
-
-/**
- * @typedef ChildClass
- * @property {string} moduleName - The module name that'll be looked for in the DOM when initialising the component
- */
-
-/**
- * @typedef {typeof Component & ChildClass} ChildClassConstructor
- */
-Component.elementType = HTMLElement;
-
-/**
- * Header component
- *
- * @preserve
- */
-class Header extends Component {
- /**
- * Apply a matchMedia for desktop which will trigger a state sync if the
- * browser viewport moves between states.
- *
- * @param {Element | null} $root - HTML element to use for header
- */
- constructor($root) {
- super($root);
- this.$menuButton = void 0;
- this.$menu = void 0;
- this.menuIsOpen = false;
- this.mql = null;
- const $menuButton = this.$root.querySelector('.govuk-js-header-toggle');
- if (!$menuButton) {
- return this;
- }
- this.$root.classList.add('govuk-header--with-js-navigation');
- const menuId = $menuButton.getAttribute('aria-controls');
- if (!menuId) {
- throw new ElementError({
- component: Header,
- identifier: 'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'
- });
- }
- const $menu = document.getElementById(menuId);
- if (!$menu) {
- throw new ElementError({
- component: Header,
- element: $menu,
- identifier: `Navigation (\`<ul id="${menuId}">\`)`
- });
- }
- this.$menu = $menu;
- this.$menuButton = $menuButton;
- this.setupResponsiveChecks();
- this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
- }
- setupResponsiveChecks() {
- const breakpoint = getBreakpoint('desktop');
- if (!breakpoint.value) {
- throw new ElementError({
- component: Header,
- identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
- });
- }
- this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`);
- if ('addEventListener' in this.mql) {
- this.mql.addEventListener('change', () => this.checkMode());
- } else {
- this.mql.addListener(() => this.checkMode());
- }
- this.checkMode();
- }
- checkMode() {
- if (!this.mql || !this.$menu || !this.$menuButton) {
- return;
- }
- if (this.mql.matches) {
- this.$menu.removeAttribute('hidden');
- this.$menuButton.setAttribute('hidden', '');
- } else {
- this.$menuButton.removeAttribute('hidden');
- this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
- if (this.menuIsOpen) {
- this.$menu.removeAttribute('hidden');
- } else {
- this.$menu.setAttribute('hidden', '');
- }
- }
- }
- handleMenuButtonClick() {
- this.menuIsOpen = !this.menuIsOpen;
- this.checkMode();
- }
-}
-Header.moduleName = 'govuk-header';
-
-export { Header };
-//# sourceMappingURL=header.bundle.mjs.map
diff --git a/packages/govuk-frontend/dist/govuk/components/header/header.mjs b/packages/govuk-frontend/dist/govuk/components/header/header.mjs
deleted file mode 100644
index b2489b672..000000000
--- a/packages/govuk-frontend/dist/govuk/components/header/header.mjs
+++ /dev/null
@@ -1,89 +0,0 @@
-import { getBreakpoint } from '../../common/index.mjs';
-import { Component } from '../../component.mjs';
-import { ElementError } from '../../errors/index.mjs';
-
-/**
- * Header component
- *
- * @preserve
- */
-class Header extends Component {
- /**
- * Apply a matchMedia for desktop which will trigger a state sync if the
- * browser viewport moves between states.
- *
- * @param {Element | null} $root - HTML element to use for header
- */
- constructor($root) {
- super($root);
- this.$menuButton = void 0;
- this.$menu = void 0;
- this.menuIsOpen = false;
- this.mql = null;
- const $menuButton = this.$root.querySelector('.govuk-js-header-toggle');
- if (!$menuButton) {
- return this;
- }
- this.$root.classList.add('govuk-header--with-js-navigation');
- const menuId = $menuButton.getAttribute('aria-controls');
- if (!menuId) {
- throw new ElementError({
- component: Header,
- identifier: 'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'
- });
- }
- const $menu = document.getElementById(menuId);
- if (!$menu) {
- throw new ElementError({
- component: Header,
- element: $menu,
- identifier: `Navigation (\`<ul id="${menuId}">\`)`
- });
- }
- this.$menu = $menu;
- this.$menuButton = $menuButton;
- this.setupResponsiveChecks();
- this.$menuButton.addEventListener('click', () => this.handleMenuButtonClick());
- }
- setupResponsiveChecks() {
- const breakpoint = getBreakpoint('desktop');
- if (!breakpoint.value) {
- throw new ElementError({
- component: Header,
- identifier: `CSS custom property (\`${breakpoint.property}\`) on pseudo-class \`:root\``
- });
- }
- this.mql = window.matchMedia(`(min-width: ${breakpoint.value})`);
- if ('addEventListener' in this.mql) {
- this.mql.addEventListener('change', () => this.checkMode());
- } else {
- this.mql.addListener(() => this.checkMode());
- }
- this.checkMode();
- }
- checkMode() {
- if (!this.mql || !this.$menu || !this.$menuButton) {
- return;
- }
- if (this.mql.matches) {
- this.$menu.removeAttribute('hidden');
- this.$menuButton.setAttribute('hidden', '');
- } else {
- this.$menuButton.removeAttribute('hidden');
- this.$menuButton.setAttribute('aria-expanded', this.menuIsOpen.toString());
- if (this.menuIsOpen) {
- this.$menu.removeAttribute('hidden');
- } else {
- this.$menu.setAttribute('hidden', '');
- }
- }
- }
- handleMenuButtonClick() {
- this.menuIsOpen = !this.menuIsOpen;
- this.checkMode();
- }
-}
-Header.moduleName = 'govuk-header';
-
-export { Header };
-//# sourceMappingURL=header.mjs.map
diff --git a/packages/govuk-frontend/dist/govuk/components/header/macro-options.json b/packages/govuk-frontend/dist/govuk/components/header/macro-options.json
index c6222c74a..0c8b549fd 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/header/macro-options.json
@@ -9,93 +9,7 @@
"name": "productName",
"type": "string",
"required": false,
- "description": "Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use `serviceName`."
- },
- {
- "name": "serviceName",
- "type": "string",
- "required": false,
- "description": "The name of your service, included in the header.",
- "deprecated": "5.9.0"
- },
- {
- "name": "serviceUrl",
- "type": "string",
- "required": false,
- "description": "URL for the service name anchor.",
- "deprecated": "5.9.0"
- },
- {
- "name": "navigation",
- "type": "array",
- "required": false,
- "description": "Can be used to add navigation to the header component.",
- "deprecated": "5.9.0",
- "params": [
- {
- "name": "text",
- "type": "string",
- "required": true,
- "description": "Text for the navigation item. If `html` is provided, the `text` option will be ignored.",
- "deprecated": "5.9.0"
- },
- {
- "name": "html",
- "type": "string",
- "required": true,
- "description": "HTML for the navigation item. If `html` is provided, the `text` option will be ignored.",
- "deprecated": "5.9.0"
- },
- {
- "name": "href",
- "type": "string",
- "required": false,
- "description": "URL of the navigation item anchor.",
- "deprecated": "5.9.0"
- },
- {
- "name": "active",
- "type": "boolean",
- "required": false,
- "description": "Flag to mark the navigation item as active or not.",
- "deprecated": "5.9.0"
- },
- {
- "name": "attributes",
- "type": "object",
- "required": false,
- "description": "HTML attributes (for example data attributes) to add to the navigation item anchor.",
- "deprecated": "5.9.0"
- }
- ]
- },
- {
- "name": "navigationClasses",
- "type": "string",
- "required": false,
- "description": "Classes for the navigation section of the header.",
- "deprecated": "5.9.0"
- },
- {
- "name": "navigationLabel",
- "type": "string",
- "required": false,
- "description": "Text for the `aria-label` attribute of the navigation. Defaults to the same value as `menuButtonText`.",
- "deprecated": "5.9.0"
- },
- {
- "name": "menuButtonLabel",
- "type": "string",
- "required": false,
- "description": "Text for the `aria-label` attribute of the button that opens the mobile navigation, if there is a mobile navigation menu.",
- "deprecated": "5.9.0"
- },
- {
- "name": "menuButtonText",
- "type": "string",
- "required": false,
- "description": "Text of the button that opens the mobile navigation menu, if there is a mobile navigation menu. There is no enforced character limit, but there is a limited display space so keep text as short as possible. By default, this is set to 'Menu'.",
- "deprecated": "5.9.0"
+ "description": "Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use the [Service navigation component](https://design-system.service.gov.uk/components/service-navigation/)."
},
{
"name": "containerClasses",
diff --git a/packages/govuk-frontend/dist/govuk/init.mjs b/packages/govuk-frontend/dist/govuk/init.mjs
index 090020833..120dec104 100644
--- a/packages/govuk-frontend/dist/govuk/init.mjs
+++ b/packages/govuk-frontend/dist/govuk/init.mjs
@@ -7,7 +7,6 @@ import { Checkboxes } from './components/checkboxes/checkboxes.mjs';
import { ErrorSummary } from './components/error-summary/error-summary.mjs';
import { ExitThisPage } from './components/exit-this-page/exit-this-page.mjs';
import { FileUpload } from './components/file-upload/file-upload.mjs';
-import { Header } from './components/header/header.mjs';
import { NotificationBanner } from './components/notification-banner/notification-banner.mjs';
import { PasswordInput } from './components/password-input/password-input.mjs';
import { Radios } from './components/radios/radios.mjs';
@@ -47,7 +46,7 @@ function initAll(scopeOrConfig = {}) {
}
return;
}
- const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [FileUpload, config.fileUpload], [Header], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
+ const components = [[Accordion, config.accordion], [Button, config.button], [CharacterCount, config.characterCount], [Checkboxes], [ErrorSummary, config.errorSummary], [ExitThisPage, config.exitThisPage], [FileUpload, config.fileUpload], [NotificationBanner, config.notificationBanner], [PasswordInput, config.passwordInput], [Radios], [ServiceNavigation], [SkipLink], [Tabs]];
components.forEach(([Component, componentConfig]) => {
createAll(Component, componentConfig, options);
});
Action run for ef4380a |
📋 StatsFile sizes
Modules
View stats and visualisations on the review app Action run for ef4380a |
querkmachine
force-pushed
the
remove-header-navigation-service-name
branch
from
a2ac5ea to
4a19f8e
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-6423
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-6423
querkmachine
force-pushed
the
remove-header-navigation-service-name
branch
from
b62efca to
5f4fb56
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-6423
querkmachine
force-pushed
the
remove-header-navigation-service-name
branch
from
5f4fb56 to
c60dcbd
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-6423
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-6423
Remove `govuk-header__link` and `govuk-header__link—homepage`, replacing them with a dedicated `govuk-header__homepage-link` class.
querkmachine
force-pushed
the
remove-header-navigation-service-name
branch
from
72b186e to
f98a149
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-6423
2 tasks
seaemsi
reviewed
Nov 10, 2025
Co-authored-by: seaemsi <[email protected]>
querkmachine
force-pushed
the
remove-header-navigation-service-name
branch
from
f98a149 to
ef4380a
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-6423
owenatgov
approved these changes
Nov 11, 2025
Contributor
owenatgov
left a comment
owenatgov
left a comment
There was a problem hiding this comment.
All looking good. Begone service name. The header is so small now ✨
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #5947.
Changes
.govuk-header__link.govuk-header__link--homepageclasses togovuk-header__homepage-link.Thoughts
With these changes, the only link presently in the header is the GOV.UK homepage link, wrapping the logo and optional product name. Based on a discussion with the devs, we've opted to remove the existing
govuk-header__linkclass andgovuk-header__link--homepagemodifier class: replacing them with a newgovuk-header__homepage-linkclass.This is so that, should we add links to the footer again in future (for example, to integrate GOV.UK One Login functionality), those links are not beholden to our existing link styling, nor will our homepage link be beholden to whatever styles they add.