Implement redesigned inverse header #5053
Conversation
hannalaakso
force-pushed
the
update-inverse-header-with-new-brand-colour
branch
from
d385c19 to
3cca62d
Compare
hannalaakso
force-pushed
the
update-inverse-header-with-new-brand-colour
branch
from
3cca62d to
d9167e1
Compare
hannalaakso
force-pushed
the
update-inverse-header-with-new-brand-colour
branch
from
6220554 to
97268e1
Compare
hannalaakso
force-pushed
the
update-inverse-header-with-new-brand-colour
branch
from
97268e1 to
e1711f5
Compare
Set the default background colour of inverse header to light blue. It will use the standard black text colour so remove setting the inverse option which makes text white on the headings inside the default variant. Make the html publication header variant the previous darker blue, and move the white text style to this variant.
These will be used on the default light blue variant of the inverse header.
Subtext is currently only used by HTML publications on GOV.UK which use the darker blue Html publication header variant of the component. We're therefore moving the subtext to this variant as the white subtext can't be used with the default light blue inverse header. We explain this in the documentation and ask developers to add a black subtext as an option to the default inverse header in the future if needed.
hannalaakso
force-pushed
the
update-inverse-header-with-new-brand-colour
branch
from
e1711f5 to
ea705d0
Compare
hannalaakso
changed the title
| @include govuk-font($size: 16, $line-height: 1.5); | ||
| } | ||
|
|
||
| .gem-c-inverse-header__link { |
There was a problem hiding this comment.
Martin and I already discussed this change - the new class name proposed here is potentially unclear and/or doesn't align with the naming convention used for the inverse link styles (see example of the changed code here). Although we plan to rename the inverse header component at a later point at which point the new class name might more sense.
Will be good to get futher thoughts from Martin on this though 👀
There was a problem hiding this comment.
Sorry for jumping in a bit late on this. My only question is why we need the gem-c-inverse-header__link selector here, and whether we might instead have all hyperlinks within gem-c-inverse-header inherit color: govuk-colour("black");.
There was a problem hiding this comment.
Looking at this further, I’m guessing the reason is that otherwise we’d need to write CSS targeting the .govuk-link class and override the styles - or remove the govuk-link styles entirely and then recreate them just for this use case, which seems a bit unnecessary.
| @include govuk-font($size: 16, $line-height: 1.5); | ||
| } | ||
|
|
||
| .gem-c-inverse-header__link { |
There was a problem hiding this comment.
Sorry for jumping in a bit late on this. My only question is why we need the gem-c-inverse-header__link selector here, and whether we might instead have all hyperlinks within gem-c-inverse-header inherit color: govuk-colour("black");.
3 participants
What
Set the default background colour of the inverse header component to light blue, and remove setting the inverse option which makes text white on the headings inside the default variant.
Make the html publication header variant the previous darker blue, and move the white text style to this variant.
Add a new inverse header black link style, and change the subtext option to be used with html publication header which is the only one currently using it on GOV.UK.
Why
A design decision was made to align the headers with new colour scheme; this was already on use on /browse. Additionally, it was decided that the HTML publications and CSV previews would continue to use the existing darker blue.
Visual Changes
From alphagov/frontend#5034
Before
After
Before
After
Before
After (no difference)
From alphagov/finder-frontend#3856
Before
After
From alphagov/collections#4233
Before
After
Before (Browse top level page template; no visual difference but now uses inverse header component)
After
Before (Browse second level page template; no visual difference but now uses inverse header component)
After
Before (Browse curated list template; no visual difference but now uses inverse header component)
After
Before (Browse A-Z list template; no visual difference but now uses inverse header component)
After
From alphagov/government-frontend#3860
Before
After (no difference)
TBC
Fixes https://gov-uk.atlassian.net/jira/software/c/projects/NAV/boards/1422?selectedIssue=NAV-18210