HMRC banner

[gavinwye]

This will more than likely be a child of the GOV.UK header

To Do

• content review of the pattern description
• code review of example markup
• assessability review of examples
• add a skip link to the header examples
• add role="main" to the main element

Screenshots

These are the screenshots that are live today collected here for reference.

Desktop versions

Personal tax account

Business tax account

Mobile versions

Personal tax account

Business tax account

[gavinwye]

See the latest work on this pattern in the design pattern library.

[gavinwye]

There is a pull request open for this against Assets Frontend hmrc/assets-frontend#819

[stevenaproctor]

@jennifer-hodgson This is the HMRC-specific extras to the GOV.UK header. Probably a good idea to rename it HMRC header. What do you think?

[mikeash82]

Moved to site header on GOV.UK issues backlog

[IxDradge]

Hi, this pattern seems to have a bug in it, when I apply the code the blue line under the header wraps awkwardly. I used the code:

{{ hmrcHeader({
  "serviceName": "Service Name",
  "serviceUrl" : "/",
  "phaseBanner" : true,
  "signOutHref" : "?sign-out"
}) }}

[IxDradge]

You can see the bug in the HMRC design system web page -

[timsb]

You can see the bug in the HMRC design system web page -

Thanks for raising @IxDradge. The reason this is showing up is because the phase banner parameter has been set to true but it has no content so is just being set to a collapsed blue box. I spotted this a while ago and wondered whether it was clear from the parameters that it was the case but seems not.

I'll add a story to our backlog to actually show a normal phase banner in the examples.

For now, if you aren't wanting to show the phase banner then you can just set it to false.

[IxDradge]

Ah got you, thanks. All working now.

[IxDradge]

Just one problem, I now can't over-write the service name on individual pages. The service name is set to what ever I call it in the layout.html file. I'd like to be able to over-write it on individual pages using this snippet -

{% set serviceName %}
Business tax account
{% endset%}

Any ideas? Thanks again.

[timsb]

In the prototype kit this can be done by either creating multiple layout files or in each individual page view overwriting/redefining the header block.

[IxDradge]

Gotcha, many thanks