Back links and breadcrumbs tweaks #1002
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The back link should be added to the template at the start of the `<div class="nhsuk-width-container">` container but before the `<main>` container. This is to ensure that it gets skipped over when using the "skip to main content" link. However currently the back link by default will appear too close to the header and too far away from the h1. This adjusts the spacing to add some spacing before the back link, but no spacing after it (as the `<main>` element already add enough vertical spacing at the top using padding).
The back link should appear before the `<main>` element. Also added an example `<h1>` within the `<main>` element to more clearly illustration the relationship between the 2 elements.
Currently in the examples there’s a `breadcrumb` block which is outside the `<div class="nhsuk-width-container">`, in a similar way to the `beforeContent` block in the template in the NHS design system. This moves the breadcrumb into `<div class="nhsuk-width-container">`, but before `<main class="nhsuk-main-wrapper" id="maincontent">`, by defining a `outerContent` which matches the existing NHS design system template.
This is no longer needed if the breadcrumb component itself is already inside the nhs-width-container.
This is for consistency with the Back link component.
…ove-breadcrumb-inside-width-container
…uk/nhsuk-frontend into release-testing
…acing tweaks for mobile
This was referenced Aug 28, 2024
This brings us into alignment with GOV.UK Frontend naming conventions. The named `outerContent` block would no longer be needed.
This was referenced Aug 28, 2024
This saves having to re-define the `<main>` element and demonstrates use of the `beforeContent` block.
|
@roshaanbajwa sorry, would you mind updating the reference images again? I've switched the examples to use the |
|
This would be a breaking change, yeah? |
|
@edwardhorsford I think so! There's a few other breaking changes proposed, eg #1000 so maybe they can all go out together? |
frankieroberto
approved these changes
Sep 9, 2024
5 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Brings together the Back link (#964) and Breadcrumbs (#974) PRs and:
Checklist