Generic header - GOV.UK Frontend

Generic header 📸

Code

Markup



<div class="govuk-generic-header">
  <div class="govuk-generic-header__container govuk-width-container">
    <div class="govuk-generic-header__logo">
      <a href="/" class="govuk-generic-header__homepage-link">
        My cool service
      </a>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/generic-header/macro.njk" import govukGenericHeader %}

{{ govukGenericHeader({
  logoText: "My cool service"
}) }}

Generic header with image logo

Open this example in a new tab

Code

Markup



<div class="govuk-generic-header">
  <div class="govuk-generic-header__container govuk-width-container">
    <div class="govuk-generic-header__logo">
      <a href="/" class="govuk-generic-header__homepage-link">
        <svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>HM Pizza Finder service</title>
<circle cx="13.5549" cy="4.21349" r="4.21349" fill="white"/>
<circle cx="13.5549" cy="25.7865" r="4.21349" fill="white"/>
<circle cx="22.8963" cy="9.6068" r="4.21349" transform="rotate(90 22.8963 9.6068)" fill="white"/>
<circle cx="4.2135" cy="20.3932" r="4.21349" transform="rotate(90 4.2135 20.3932)" fill="white"/>
<circle cx="22.8963" cy="20.3932" r="4.21349" transform="rotate(90 22.8963 20.3932)" fill="white"/>
<circle cx="4.21351" cy="9.60674" r="4.21349" transform="rotate(90 4.21351 9.60674)" fill="white"/>
</svg>

      </a>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/generic-header/macro.njk" import govukGenericHeader %}

{{ govukGenericHeader({
  logoHtml:
    '<svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
    "<title>HM Pizza Finder service</title>\n" +
    '<circle cx="13.5549" cy="4.21349" r="4.21349" fill="white"/>\n' +
    '<circle cx="13.5549" cy="25.7865" r="4.21349" fill="white"/>\n' +
    '<circle cx="22.8963" cy="9.6068" r="4.21349" transform="rotate(90 22.8963 9.6068)" fill="white"/>\n' +
    '<circle cx="4.2135" cy="20.3932" r="4.21349" transform="rotate(90 4.2135 20.3932)" fill="white"/>\n' +
    '<circle cx="22.8963" cy="20.3932" r="4.21349" transform="rotate(90 22.8963 20.3932)" fill="white"/>\n' +
    '<circle cx="4.21351" cy="9.60674" r="4.21349" transform="rotate(90 4.21351 9.60674)" fill="white"/>\n' +
    "</svg>\n"
}) }}

Generic header with text and image logo 📸

Open this example in a new tab

Code

Markup



<div class="govuk-generic-header">
  <div class="govuk-generic-header__container govuk-width-container">
    <div class="govuk-generic-header__logo">
      <a href="/" class="govuk-generic-header__homepage-link">
        <svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="13.5549" cy="4.21349" r="4.21349" fill="white"/>
<circle cx="13.5549" cy="25.7865" r="4.21349" fill="white"/>
<circle cx="22.8963" cy="9.6068" r="4.21349" transform="rotate(90 22.8963 9.6068)" fill="white"/>
<circle cx="4.2135" cy="20.3932" r="4.21349" transform="rotate(90 4.2135 20.3932)" fill="white"/>
<circle cx="22.8963" cy="20.3932" r="4.21349" transform="rotate(90 22.8963 20.3932)" fill="white"/>
<circle cx="4.21351" cy="9.60674" r="4.21349" transform="rotate(90 4.21351 9.60674)" fill="white"/>
</svg> | HM Pizza Finder service

      </a>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/generic-header/macro.njk" import govukGenericHeader %}

{{ govukGenericHeader({
  logoHtml:
    '<svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
    '<circle cx="13.5549" cy="4.21349" r="4.21349" fill="white"/>\n' +
    '<circle cx="13.5549" cy="25.7865" r="4.21349" fill="white"/>\n' +
    '<circle cx="22.8963" cy="9.6068" r="4.21349" transform="rotate(90 22.8963 9.6068)" fill="white"/>\n' +
    '<circle cx="4.2135" cy="20.3932" r="4.21349" transform="rotate(90 4.2135 20.3932)" fill="white"/>\n' +
    '<circle cx="22.8963" cy="20.3932" r="4.21349" transform="rotate(90 22.8963 20.3932)" fill="white"/>\n' +
    '<circle cx="4.21351" cy="9.60674" r="4.21349" transform="rotate(90 4.21351 9.60674)" fill="white"/>\n' +
    "</svg> | HM Pizza Finder service\n"
}) }}

Generic header full width

Open this example in a new tab

Code

Markup



<div class="govuk-generic-header">
  <div class="govuk-generic-header__container govuk-generic-header__container--full-width">
    <div class="govuk-generic-header__logo">
      <a href="/" class="govuk-generic-header__homepage-link">
        <svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="13.5549" cy="4.21349" r="4.21349" fill="white"/>
<circle cx="13.5549" cy="25.7865" r="4.21349" fill="white"/>
<circle cx="22.8963" cy="9.6068" r="4.21349" transform="rotate(90 22.8963 9.6068)" fill="white"/>
<circle cx="4.2135" cy="20.3932" r="4.21349" transform="rotate(90 4.2135 20.3932)" fill="white"/>
<circle cx="22.8963" cy="20.3932" r="4.21349" transform="rotate(90 22.8963 20.3932)" fill="white"/>
<circle cx="4.21351" cy="9.60674" r="4.21349" transform="rotate(90 4.21351 9.60674)" fill="white"/>
</svg> | HM Pizza Finder service

      </a>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/generic-header/macro.njk" import govukGenericHeader %}

{{ govukGenericHeader({
  containerClasses: "govuk-generic-header__container--full-width",
  logoHtml:
    '<svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">\n' +
    '<circle cx="13.5549" cy="4.21349" r="4.21349" fill="white"/>\n' +
    '<circle cx="13.5549" cy="25.7865" r="4.21349" fill="white"/>\n' +
    '<circle cx="22.8963" cy="9.6068" r="4.21349" transform="rotate(90 22.8963 9.6068)" fill="white"/>\n' +
    '<circle cx="4.2135" cy="20.3932" r="4.21349" transform="rotate(90 4.2135 20.3932)" fill="white"/>\n' +
    '<circle cx="22.8963" cy="20.3932" r="4.21349" transform="rotate(90 22.8963 20.3932)" fill="white"/>\n' +
    '<circle cx="4.21351" cy="9.60674" r="4.21349" transform="rotate(90 4.21351 9.60674)" fill="white"/>\n' +
    "</svg> | HM Pizza Finder service\n"
}) }}