Footer

[govuk-design-system]

Use this issue to discuss the footer component in the GOV.UK Design System.

What

Footer for GOV.UK sites, including departmental and service variants.

Why

Site footer are used on all web pages. There's also a need for consistent footers for departmental and internal services.

Anything else

• HMRC footer in HMRC design patterns
• DWP footer in DWP elements guide
• Footer discussion on Dropbox Paper

Related patterns

• #97 Site header

[chrisroos]

Hi,

We're using this footer component on the new marketplace app we're building for CCS. We're investigating how to make the footer sticky so that it appears at the bottom of the page even if the page doesn't have much content. I've searched the design system but couldn't find anything about a sticky footer there so wondered whether you had any advice on how best to go about it?

[amyhupe]

Dropbox Paper audit

On 16 January 2019 the Design System team reviewed a Dropbox Paper document discussing the Footer component.

The aim was to reduce the number of places containing guidance and code by:

• migrating relevant, useful content into the Design System itself
• recording important research findings in the community backlog
• removing the original Dropbox Paper page

Below is a record of the outcomes of that review.

If you need to, you can see the original Dropbox Paper content in the internet archive.

Review outcomes

Updates to the Design System

The Design System team will carry out the following updates to ensure that relevant, useful content from the Dropbox Paper file is added to the Design System.

• Under when to use, clarify that you have to use the footer if your service is on GOV.UK as currently the guidance just says "Use the footer at the bottom of every page of your service."

• Update the list of things you can add to your footer to include links to APIs and data feeds and link to the responsible department (not to a commercial supplier).

[edwardhorsford]

I'm trying to have one or more lines of text above the footer links. Right now the component makes this a little awkward.

It has the text option - but this places content below the links.

I can pass html, but then have to pass the html of the links too.

I also can't see a class for getting the right font / colour - it seems to inherit from the parent govuk-footer - if I put things in a paragraph it throws out the styling (we have styles on p). I think the equivalent of govuk-body but for footer content would be good.

What I'm aiming for:

[edwardhorsford]

I'm now making my own style for the footer text - but it doesn't look like the colour used is exposed. For now I've hard coded it - but perhaps it could be made available?

[edwardhorsford]

For now, I've gone with:

$govuk-footer-text: #454a4c; // design system doesn't expose this colour

.app-footer__body {
  @include govuk-font(16);
  color: $govuk-footer-text
}

[edwardhorsford]

One more from me. Is it possible to override the OGL logo and text? It's not relevant to our service and our content is not released under this licence.

I presume other services which contain confidential / official information may have similar needs - potentially depending on the page of the service. Feels like it would be good to make it configurable.

I've ended up using raw html - but need extra styles so the last child of .govuk-footer__menu-item has 0 margin-bottom.

[HughePaul]

Another reason to have the English text on this component configurable is so it can be translated into Welsh

[terrysimpson99]

Some sites have "Built by ..." in the footer, see: https://www.gov.uk/universal-credit/how-to-claim

Others don't, see: https://www.universal-credit.service.gov.uk/postcode-checker

Is there a declutter opportunity here?

[paulrobertlloyd]

For the service I’m prototyping, we want to signpost help content in the footer. However this component isn’t yet flexible enough to achieve the desired result:

In order to achieve the above, I ‘forked’ the footer, making the following changes:

• Removed the OGL licence text as this isn’t applicable to our service (could this be made an option, but shown by default?)
• Added a meta.title option. If this value is provided, a heading is shown above the meta links. If not, the current behaviour is honoured (a visibly hidden title, whose content defaults to ‘Support links’ if params.meta.visuallyHiddenTitle is not provided)
• Moved div.govuk-footer__meta-custom (populated by params.meta.text/params.meta.html) above ul.govuk-footer__inline-list. Is there a case for having slots above and below params.meta.items?

(This is all very similar to @edwardhorsford’s feedback above).

This is the forked Nunjucks tag as it appears in our templates:

{{ appFooter({
  classes: "govuk-footer--app",
  meta: {
    title: "Need help?",
    html: "Call <a href=\"https://getintoteaching.education.gov.uk/\">Get into Teaching</a> on Freephone 0800 389 2500 or chat to an adviser using their <a href=\"https://ta-chat.education.gov.uk/chat/chatstart.aspx?domain=www.education.gov.uk&department=GetIntoTeaching%27,%27new_win%27,%27width=0,height=0%27);return%20false;%22&SID=1\">online chat service</a> between 8am and 8pm, Monday to Friday",
    items: [{
      href: "mailto:[email protected]",
      text: "Give feedback or report a problem"
    }, {
      href: "/admin/flags",
      text: "Feature flags"
    }, {
      href: "/admin/clear-data",
      text: "Clear data"
    }]
  }
}) }}

In terms of CSS, I modified the following:

.govuk-footer--app {
  .govuk-footer__meta-custom {
    max-width: 40rem;
    margin-bottom: govuk-spacing(6);

    a {
      color: inherit;
    }
  }

  .govuk-footer__inline-list {
    margin-bottom: 0;
  }

  .govuk-footer__inline-list-item {
    margin-bottom: 0;
  }
}

This ensures links within the meta content inherit the colour of the footer text, and removes bottom margins from both .govuk-footer__inline-list and .govuk-footer__inline-list-item so that they align with ‘© Crown Copyright’. These margins exist due to the presence of the OGL licence text; were that to be made optional, the space should be added to the top of that content, rather than to the bottom of the meta items.

I hope this feedback is useful!

[edwardhorsford]

In the footer, some links look to no longer have underlines - did this change recently?

Is the rule that it should have an underline if it’s in a sentence, and not if it’s on it’s own?

My service uses links on their own as well as in sentences - it feels odd to have two different link styles for these:

[NickColley]

Hey @edwardhorsford,

I've recorded the reasoning why this decision was made here:

https://github.com/alphagov/govuk-frontend/pull/1321#issuecomment-549364442

[DouglasCaven]

Hi, I am working on the Immigration Health Surcharge project and we have an accessibility statement that we want to add a potential date for the resolution of this issue. Can someone please advise (that if we have a date) when this fix is scheduled to go 'live'? Thank you.

[vanitabarrett]

Hi @DouglasCaven 👋 Apologies, I'm not sure exactly which issue you're referring to as there are a couple of things in our backlog relating to the footer component. If you let me know specifically what issue/fix you want to get an update on, I can look into that for you.

[DouglasCaven]

Hi Vanita,

Thank you for the quick response.

The specific issue relates to the footer contrast and the issue description is to ensure the contrast between foreground and background meets WCAG 2 AA contrast ration thresholds.

I have added the screenshot of the potential fix to clarify. [Graphical user interface, application, email Description automatically generated]

Please let me know if this is enough information for you or if you require anything else?

Thank you.

Doug.

Douglas Caven User Experience Designer NHS Business Services Authority

(updated)

[vanitabarrett]

@DouglasCaven I can't see your screenshot, but I think you might be referring to the Crown Copyright logo? We do have an issue for that here: https://github.com/alphagov/govuk-frontend/issues/2134 .

Unfortunately I'm not sure when we will be picking up this work yet. We are planning quite a few improvements to the header and footer components for our next breaking release, which we're hoping to work on in the next few months, but I can't say for sure when it'll be released.

[DouglasCaven]

Hi Vanita,

Yes, 2134 covers it.

Is there any way I can be notified of a potential release date?

Thanks for the update.

Doug.

Douglas Caven User Experience Designer NHS Business Services Authority

(updated)

[vanitabarrett]

@DouglasCaven I think the best way is to keep an eye on that Github issue - there should be a button in the sidebar on that issue which lets you sign up for notifications. When we do a release of GOV.UK Frontend we also always document the changes in the changelog and release notes, so it will be included there when we do ship a fix.

[DouglasCaven]

There is a dropdown next to ‘Watch’ for Notifications where I can select ‘All Activity’, which should do it for this specific issue.

For the GOV.UK Frontend changelog and release notes, how can I be notified? Is there something I need to sign up to for this?

Apologies, my GitHub knowledge is limited!

Thanks again.

Douglas Caven User Experience Designer NHS Business Services Authority

(updated)

[vanitabarrett]

@DouglasCaven That notification should be enough. We publish our release notes in the 'releases' tab in Github https://github.com/alphagov/govuk-frontend/releases

As an update, I've spoken to some of the other developers in our team and we've agreed that the colour contrast issue with the Crown Copyright logo shouldn't be a WCAG fail and we don't think it would need to be included in an accessibility statement. The Crown Copyright logo meets the WCAG definition of a "meaningful graphic" and falls under WCAG 1.4.11: Non-text Contrast where a contrast of 3:1 is required. The Crown Copyright logo has a contrast of 4.08:1 which comfortably meets this requirement. That's not to say we won't be looking at improving the contrast in the future to match text/links on the page, but at this moment in time we don't think it's a WCAG fail.

[DouglasCaven]

Hi Vanita,

Thank you for your help and for the ‘release’ link.

Doug.

Douglas Caven User Experience Designer NHS Business Services Authority

(updated)

[Marat-Faizov]

Hello, noticed that in Footer with secondary navigation and links to meta information section footer link with welsh text doesn't use lang='cy', it might cause difficulties for assistive technology users, and 'read out' text incorrectly for them <a class="govuk-footer__link" href="#"> Rhestr o Wasanaethau Cymraeg </a>