search

DFE-Digital / design

Design manual for the Department for Education. This service is owned by the Design Ops team. Changes and approvals are managed by @andyjones81 or DfE Design Ops. (See the DFE Design Manual for details)
https://design.education.gov.uk
2 stars 5 forks source link

Header #6

Open andyjones81 opened 1 year ago

andyjones81 commented 1 year ago

What

For services not provided on service.gov.uk or for specific user groups where the service is provided on education.gov.uk we need a header which:

Context

There is confusion and inconsistent use of headers across DfE services and there needs to be a common component to ensure branding consistency, style and familiarity for users.

Alternatives

Current guidance is a restyled version of the GOV.UK header but is very basic.

https://design.education.gov.uk/design-system/branding-standards/dfe-branding

Variations of blue headers

image image image

Variations of other headers in DfE services

image

image

image

image

image

andyjones81 commented 1 year ago

Component published in the design manual as an Alpha. Can be used in Production services through the NPM package

Component - Header

andyjones81 commented 1 year ago

DfE Header

andyjones81 commented 1 year ago

Need to add some guidance for how to use the header with phase banners.

It's exactly the same as GOV.UK header, put them in the beforeContent section of the GOV.UK page template.

andyjones81 commented 1 year ago

Links don't have the correct class to ensure hover and active states are displayed correctly.

dangood84 commented 8 months ago

image

Morning @andyjones81 - "Manage free school projects" service name fails to take up 100% of width in restored window or in zoomed state.

Thanks