Convert tables with single fields to unordered lists#5995
Open
kr8n3r wants to merge 2 commits into
Open
Conversation
kr8n3r
force-pushed
the
convert-tables-to-lists
branch
3 times, most recently
from
July 18, 2026 15:30
bd62344 to
5263833
Compare
A list is a more appropriate way to display one item at a time as there is no relationship. To achieve the visual of separating items, the govuk-list was extended with a 'bordered' variant. Includes updates to tests
kr8n3r
force-pushed
the
convert-tables-to-lists
branch
from
July 19, 2026 06:23
5263833 to
3a4376c
Compare
A list is a more appropriate way to display one item at a time as there is no relationship. The base markup of this is bordered govuk-list variant created here for the contact-list and then extended with `govuk-list__with-link-and-metadata` modifier which styles the link and paragraph. For styling, I was torn between applying overriding classes that are available, such as .hint and govuk-!-font-16 directly in markup vs adding styling in SCSS. There are pros and cons for both approaches.
kr8n3r
force-pushed
the
convert-tables-to-lists
branch
from
July 19, 2026 10:31
3a4376c to
d79847a
Compare
kr8n3r
marked this pull request as ready for review
July 20, 2026 06:10
This file contains hidden or 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
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.
What
Convert tables with single fields to use an unordered list.
utilising the Design system's
govuk-listand extending it to create a border list and list with metadataReview
To test the contact-list, upload a CSV or phone number or email addresses.
To test the list of returned letters you can use the below script to insert some dummy data in your local DB
and then view the list on
services/<serviceID>/returned-lettersVisuals
Before

After

Before

After
