Generic header

Generic header 📸

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">
        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="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>HM Pizza Finder service</title>
<circle cx="13.5549" cy="4.21349" r="4.21349"/>
<circle cx="13.5549" cy="25.7865" r="4.21349"/>
<circle cx="22.8963" cy="9.6068" r="4.21349"/>
<circle cx="4.2135" cy="20.3932" r="4.21349"/>
<circle cx="22.8963" cy="20.3932" r="4.21349"/>
<circle cx="4.21351" cy="9.60674" r="4.21349"/>
</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="currentColor" 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"/>\n' +
    '<circle cx="13.5549" cy="25.7865" r="4.21349"/>\n' +
    '<circle cx="22.8963" cy="9.6068" r="4.21349"/>\n' +
    '<circle cx="4.2135" cy="20.3932" r="4.21349"/>\n' +
    '<circle cx="22.8963" cy="20.3932" r="4.21349"/>\n' +
    '<circle cx="4.21351" cy="9.60674" r="4.21349"/>\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="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>HM Pizza Finder service</title>
<circle cx="13.5549" cy="4.21349" r="4.21349"/>
<circle cx="13.5549" cy="25.7865" r="4.21349"/>
<circle cx="22.8963" cy="9.6068" r="4.21349"/>
<circle cx="4.2135" cy="20.3932" r="4.21349"/>
<circle cx="22.8963" cy="20.3932" r="4.21349"/>
<circle cx="4.21351" cy="9.60674" r="4.21349"/>
</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="currentColor" 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"/>\n' +
    '<circle cx="13.5549" cy="25.7865" r="4.21349"/>\n' +
    '<circle cx="22.8963" cy="9.6068" r="4.21349"/>\n' +
    '<circle cx="4.2135" cy="20.3932" r="4.21349"/>\n' +
    '<circle cx="22.8963" cy="20.3932" r="4.21349"/>\n' +
    '<circle cx="4.21351" cy="9.60674" r="4.21349"/>\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="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>HM Pizza Finder service</title>
<circle cx="13.5549" cy="4.21349" r="4.21349"/>
<circle cx="13.5549" cy="25.7865" r="4.21349"/>
<circle cx="22.8963" cy="9.6068" r="4.21349"/>
<circle cx="4.2135" cy="20.3932" r="4.21349"/>
<circle cx="22.8963" cy="20.3932" r="4.21349"/>
<circle cx="4.21351" cy="9.60674" r="4.21349"/>
</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="currentColor" 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"/>\n' +
    '<circle cx="13.5549" cy="25.7865" r="4.21349"/>\n' +
    '<circle cx="22.8963" cy="9.6068" r="4.21349"/>\n' +
    '<circle cx="4.2135" cy="20.3932" r="4.21349"/>\n' +
    '<circle cx="22.8963" cy="20.3932" r="4.21349"/>\n' +
    '<circle cx="4.21351" cy="9.60674" r="4.21349"/>\n' +
    "</svg> | HM Pizza Finder service\n"
}) }}