Guidance

There are specific use-cases for when to use the DfE header, and when you shouldn't use it. If you are unsure, contact DesignOps.

There are several variants of the header, which meet most use-case needs. There is also a Figma library which contains the header for use in prototypes.

Do

  • use the header on internal, staff-facing sites
  • use the header on public beta sites that are going to be provided on a education.gov.uk domain when live
  • use the header on live sites that are provided on education.gov.uk

Don't

  • use the header on live sites hosted on service.gov.uk
  • use the DfE header if the site is on education.gov.uk for private beta testing, and will eventually be on service.gov.uk
  • put tags or phase banners in the header - use the phase banner in the beforeContent layout section
  • change the colours - they are the department brand colours and meet accessibility requirements
  • change the placement or size of the logo - it meets Government Communication Service guidelines for government logos
  • change the position of the service name - this is styled to support different breakpoints and viewports and will move to below the logo when required to

Using phase banners with the header

The GOV.UK phase banner component helps you tell users that the page they are on might be an alpha or beta page, and therefore, being tested.

If you are using the GOV.UK page template, add phase banners in the beforeContent layout section in the same way as you would with the GOV.UK header component.

This will ensure the phase banner is displayed immediately after the header and before any of the main content.

Services using this component

The following services are using this component:

Help us improve this component

To improve this component based on user needs and research, you can contribute on the Header - Component #2 project issue.