design-system
design-system copied to clipboard
cfpb
Links: Link styles are missing
Which page is this about? Links
What kind of issue is this?
- [x] Needs content written (page is missing key information, e.g. use cases)
Describe your issue Add styles for black link text + blue rollover state (see for example the 50/50s on the servicemember page)
Size this request (1=tiny, 5=enormous) 1
Add styles for black link text + blue rollover state (see for example the 50/50s on the servicemember page)
This seems kind of like an antipattern to me. Take this example:
What does the heading "Strengthening the Military Lending Act (MLA)" link to? Perhaps a page about the act? Perhaps it's the same as the "See more" link? No wait, it links to the first PDF from the "What is the MLA, and what are my rights?" link, except it doesn't have the PDF icon.
I think this header link is superfluous and easter-eggy. I know it's that time of the year, but instead of adding these types of links to the DS I think we should think about discouraging them and remove them from cf.gov.
@anselmbradford A better example would be the headings on filterable lists, where there is no other link to the item page, but we don't want headings generally to use standard link styles.
@anselmbradford for the notification, with apologies to user Ans for the incorrect tag.
A better example would be the headings on filterable lists, where there is no other link to the item page, but we don't want headings generally to use standard link styles.
Mmm that one makes more sense. Should we discourage it's use in the servicemember scenario though?
A better example would be the headings on filterable lists, where there is no other link to the item page, but we don't want headings generally to use standard link styles.
Mmm that one makes more sense. Should we discourage it's use in the servicemember scenario though?
Yes, I would say so. It's kinda nice to link the heading of an info unit if there is only one link below it, but in scenarios like this, definitely a bad idea.
Should we discourage it's use in the servicemember scenario though?
I think there are a couple of things going on in that info unit on the servicemember page to tease apart. The first is that the "link image and heading" option is checked to turn the heading into a link, the href of which matches he first link in the link list. If I remember right, that "link image and heading" option came out of heatmap data that showed a lot of people trying to click on those headings. Given the evidence we have in its favor, I think we'd want to keep that option—and thus the heading-like link style—around.
The second thing is that we don't restrict the number of links you can put in a link list. If you put more than one link in a list and then check that "link image and heading" option, the heading links to the first link in the list by design. I agree that makes for a confusing experience—we have help text in Wagtail noting that the first link in the group will be what's used for the heading but no indication of that on the front end. I think checking that option when there's more than one link in the list is what we should discourage, definitely in writing here in the Design System and maybe even with a validation check in Wagtail (that would be way outside the scope of this issue, though).
"link image and heading" option came out of heatmap data that showed a lot of people trying to click on those headings. Given the evidence we have in its favor, I think we'd want to keep that option—and thus the heading-like link style—around.
It would be interesting to know where people clicking the header thought they'd end up.
Ans and I discussed and feels that headings doubling as links could use a fresh 2024 UX/design review. Some instances we reviewed:
- https://www.consumerfinance.gov/ask-cfpb/
- https://www.consumerfinance.gov/consumer-tools/educator-tools/adult-financial-education/