Cookies on the DWP Design System website

We use some essential cookies to make this service work.

We’d also like to use analytics cookies so we can understand how you use the service and make improvements.

View cookies
Skip to main content

Pages Internal service page

A page template for services that do not use GOV.UK branding.

Open this internal service page example in a new tab
Service name

Example heading

Example content 

<header class="dwp-header">
<div class="dwp-header__content govuk-width-container">
<div class="dwp-header__service-name">
  <a href="#" class="dwp-header__link">Service name</a>
</div>
</div>
</header>
<main class="govuk-main-wrapper govuk-main-wrapper--auto-spacing" id="main-content" role="main">
<div class="govuk-width-container">
<div class="govuk-grid-row">
  <div class="govuk-grid-column-two-thirds">
    <h1 class="govuk-heading-xl">
      Example heading
    </h1>
    <p class="govuk-body">
      Example content
    </p>
  </div>
</div>
</div>
</main>
<footer class="govuk-footer">
<div class="govuk-width-container">
<h2 class="govuk-visually-hidden">footer links</h2>
<ul class="govuk-footer__inline-list">
  <li class="govuk-footer__inline-list-item">
    <a class="govuk-footer__link" href="#1">Item 1</a>
  </li>
  <li class="govuk-footer__inline-list-item">
    <a class="govuk-footer__link" href="#2">Item 2</a>
  </li>
  <li class="govuk-footer__inline-list-item">
    <a class="govuk-footer__link" href="#3">Item 3</a>
  </li>
</ul>
</div>
</footer>
{% from "internal-service-header/macro.njk" import dwpHeader %}
{% from "internal-service-footer/macro.njk" import dwpFooter %}

{{
    dwpHeader({
        serviceName: "Service name",
        serviceHref: '#',
        container: true
    })
}}

<main class="govuk-main-wrapper govuk-main-wrapper--auto-spacing" id="main-content" role="main">
<div class="govuk-width-container">       
<div class="govuk-grid-row">
  <div class="govuk-grid-column-two-thirds">
    <h1 class="govuk-heading-xl">
      Example heading
    </h1>
    <p class="govuk-body">
      Example content
    </p>
  </div>
</div>
</div>
</main>

{{
    dwpFooter({
        meta: {
            visuallyHiddenTitle: "footer links",
            items: [
            {
                href: "#1",
                text: "Item 1"
            },
            {
                href: "#2",
                text: "Item 2"
            },
            {
                href: "#3",
                text: "Item 3"
            }
            ]
        }
    })
}}

When to use this pattern

This page template can be used for services that are not hosted on service.gov.uk domains and therefore don’t use GOV.UK branding.

When not to use this pattern

If the service is hosted on a service.gov.uk domain, use the GOV.UK page template instead.

How it works

This page template includes the minimum markup and components needed for a basic page not hosted on a service.gov.uk domain.

It uses the Internal service header and Internal service footer.

Contribute

If you have used or researched this pattern, please let us know what you found so we can make it better for everyone. There is an open discussion on GitHub where you can share anything you think might be useful.

Discuss Internal page template on GitHub

Get in touch

If you’ve got a question, idea or suggestion email the Design System team on dwp-design-system@engineering.digital.dwp.gov.uk

Back to top