Create additional link styles to align with buttons on cookie banner

[kellylee-gds]

What

We now have three inline actions in the cookie banner. New styles may need to be introduced to keep all actions aligned, equally spaced and consistent.

The 'accept...' and 'reject...' actions are buttons but the 'View and set cookie preferences' action is a link and is visually different from the two buttons.

Why

Users need to understand that the three actions are related and that their cookie preferences can be altered to selectively opt in and out of additional cookie types.

Who needs to know about this

Designers, developers

Further detail

• The focus styles for links are also different and should be looked at as part of this work.
• The primary button padding may also need to be reviewed if it is to have consistency with the currently proposed button for rejecting cookies.

Done when

• Decided on content for buttons and links in the cookie banner.
• Decided on styling for the 'reject...' button within the banner.
• Researched and documented use of button alongside links in services across gov.
• Decided if this is an adjustment to the styles in the component or more universally to inline links.
• Adjustments to the styles of the links and buttons to create consistency across desktop and mobile.

[CharlotteDowns]

Work so far

• A work in progress proposal for links next to buttons has been committed to GOV.UK Frontend
• Examples of buttons alongside links
• Styling of primary and secondary buttons to sit alongside links and input fields

[vanitabarrett]

Update: there was a conversation on Slack yesterday about styling the 'Hide' link in the confirmation banner as a button instead of a link.

[CharlotteDowns]

Design decisions

Based on the working group feedback for the cookie banner we prototyped moving the 'view cookies' link onto a separate line beneath the 'accept...' and 'reject...' buttons. These prototypes use an earlier draft of the cookie banner guidance but with updated button and link content.

Inline

New line

We have made the decision to proceed with the inline version of the buttons and link. This makes the assumption that users may be confused about the relationship of the links with the buttons, possibly even mistaking it for an additional option or next step. If you have any feedback or user research that can help us improve on this please let us know.

---

Margins

We are suggesting adding the class govuk-!-margin-right-2 to the first button 'Accept analytics cookies' and no additional spacing styles to the 'Reject analytics cookies' to space the buttons equally with the margin styles of the 'View cookies' link.

Other points to note:

• We need to decide on the responsive behaviour of the inline components; two buttons and a link. A suggestion would be to wrap the buttons govuk-grid-column-full instead of govuk-grid-column-two-thirds as this only causes one break point instead of two as the screen size gets smaller.
• The margin styles for the inline link need to change when it moves to a line on it's own.
• We need to confirm the vertical margins between the buttons on mobile view where they take 100% width of the screen.