Applying the brand

nidirect online transactional services should be built using the GOV.UK design system and be branded with the nidirect header and footer.

Including the GOV.UK Frontend and nidirect branding in your projects

To start using the nidirect brand with GOV.UK styles, components and patterns, you’ll need to include GOV.UK Frontend and nidirect branding in your project.

You can install both the GOV.UK Frontend and nidirect branding using node.js package manager (npm).

GOV.UK provide their own guidance for installing the GOV.UK Frontend using npm.

Once you have installed the GOV.UK Frontend, you should install the nidirect branding found in the nidirect-frontend package.

Guidance for installing the nidirect branding package can be found in the README.md file in the nidirect frontend repository.

Robots meta tag

The starting point for an nidirect online transactional service is a page on the nidirect.gov.uk core site. Content on transactional services should not be indexed by search engines. Each page must include a 'noindex, nofollow' instruction that should be inserted into the <head> element of the HTML code.

nidirect robots instructional HTML code 
 
<meta name="robots" content="no index, no follow"/>

nidirect branding

nidirect favicon

Each page must include the nidirect favicon. This should be inserted into the <head> element of the HTML code.

nidirect favicon HTML code 

<link rel="shortcut icon" size="16x16 32x32 48x48" href="/node_modules/nidirect-frontend/assets/images/favicon.ico" type="image/x-icon">

nidirect header

The nidirect header shows users that they are on nidirect.gov.uk and which service they are using. You must use the nidirect header at the top of each page in your application.

The nidirect header includes the nidirect logo and the service name container. You will need to update this section to show your application's name.

Insert the nidirect header HTML code below the opening <body> tag of your HTML file.

nidirect header HTML code 
 
<header class="nidirect-header" role="banner" data-module="govuk-header">
 <div class="govuk-width-container nidirect-header__container">
   <div class="nidirect-header__logo">
     <svg role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="133" height="32"viewbox="0 0 133 32">
       <path fill="currentColor" d="M0,8.93l7-.41a31.54,31.54,0,0,1,.62,4.64,10.06,10.06,0,0,1,3.31-3.43,8.4,8.4,0,0,1,4.34-1.15,6.65,6.65,0,0,1,3.49.83A5.74,5.74,0,0,1,21,12a9.17,9.17,0,0,1,.86,4V26.17a2.24,2.24,0,0,0,.5,1.63,2.48,2.48,0,0,0,1.71.47h.68a2,2,0,0,0,1.45-.47,1.93,1.93,0,0,0,.47-1.42V13.15A2.42,2.42,0,0,0,26,11.26a3,3,0,0,0-2.13-.65H22.17V8.93l8.36-.24V26.78a1.36,1.36,0,0,0,.35,1.06,1.92,1.92,0,0,0,1.3.44h2V30H14.54V28.28H15.6a3.34,3.34,0,0,0,2.07-.47,1.78,1.78,0,0,0,.59-1.42v-9A8.37,8.37,0,0,0,17.37,13a4.13,4.13,0,0,0-3.81-2,5.39,5.39,0,0,0-4.26,2,8,8,0,0,0-1.68,5.32v7.8a2.24,2.24,0,0,0,.5,1.63,2.56,2.56,0,0,0,1.74.47h1.42V30H.21V28.29H1.66a2.58,2.58,0,0,0,1.66-.44,1.38,1.38,0,0,0,.59-1.12V13.12a2.66,2.66,0,0,0-.74-2,2.88,2.88,0,0,0-2.1-.71H0Z" />
       <path fill="currentColor" d="M24.29,3.75A3.66,3.66,0,1,1,28,7.41h0a3.65,3.65,0,0,1-3.66-3.66" />
       <path fill="currentColor" d="M46.61,24.3a3.89,3.89,0,0,1-3,1.51c-2.39,0-3.31-2-3.31-6.3,0-4.41.95-6.5,3.43-6.5a3.82,3.82,0,0,1,2.87,1.63ZM54,0H46.61V11.23a8.06,8.06,0,0,0-5.94-2.66c-4.73,0-8.13,4.26-8.13,11s3.25,10.85,8,10.85a9.25,9.25,0,0,0,6.09-2.54V30H54V0" />
       <rect fill="currentColor" x="55.3" y="8.84" width="7.36" height="21.1" />
       <path fill="currentColor" d="M64,30h7.39V16c1.25-1,3.69-1.92,7.48-.53V8.37c-3.13.21-5.59.53-7.48,2.84V8.85H64Z" />
       <path fill="currentColor" d="M116.33,22.11c-.74,2.39-2.16,3.66-4,3.66-2.66,0-3.54-2.13-3.54-6.53,0-4.08.8-6,3.19-6,1.51,0,2.25,1,2.6,3.07l6.59-.5c-1.27-4.76-4.73-7.42-9.55-7.42-6.21,0-10.58,4.49-10.58,11.23s4.2,11,10.55,11a9.76,9.76,0,0,0,10-7.51Z" />
       <path fill="currentColor" d="M133,29.91v-5a9.67,9.67,0,0,1-1.86.24c-1.39,0-2-.59-2-1.92V13.49H133V8.85h-3.84V1.39H122V25c0,3.72,2.28,5.5,7,5.5a15,15,0,0,0,4.1-.57" />
       <path fill="currentColor" d="M55.3,3.75A3.66,3.66,0,1,1,59,7.41,3.66,3.66,0,0,1,55.3,3.75h0" />
       <path fill="currentColor" d="M100.49,20.93c0-.44,0-.83,0-1.21,0-7.06-4.2-11.32-10.79-11.32S78.56,12.81,78.56,19.69c0,6.68,4.37,11,11.17,11,5,0,8.48-2,10.58-5.79L95.58,22.7a5,5,0,0,1-4.73,3c-2.84,0-4.52-1.68-4.52-4.61v-.12ZM89.76,12.77c2.1,0,3.34,1.51,3.34,4.14H86.54C86.6,14.19,87.72,12.77,89.76,12.77Z" />
     </svg>
     <span class="govuk-visually-hidden">(n i direct government services)</span>
   </div>
 </div>
</header>

The footer provides copyright, licensing and other information about your service and department. You must use the nidirect footer at the bottom of each page in your application.

The footer for your application will need to be adapted to fit your needs.

You will need to change the links in the code provided to show the correct content for your application.

You will need to link to your own:

  • privacy statement
  • cookies
  • accessibility statement

A link to terms and conditions may be necessary in some scenarios, but most applications will outline these in the application process.

Insert the nidirect footer HTML code above the closing </body> tag of your HTML file.

nidirect footer HTML code 
 
<footer class="nidirect-footer" role="contentinfo">
 <div class="govuk-width-container">
   <h2 class="govuk-visually-hidden">Support links</h2>
   <ul class="nidirect-footer__list">
     <li>
       <a class="govuk-link" href="#" target="blank" rel="nofollow">Privacy (opens in a new tab)</a>
     </li>
     <li>
       <a class="govuk-link" href="#" target="blank" rel="nofollow">Cookies (opens in a new tab)</a>
     </li>
     <li>
       <a class="govuk-link" href="#" rel="nofollow">Accessibility</a>
     </li>
   </ul>
 </div>
</footer>