TWE-19 | FE | Links columns block #345
Conversation
| border-top: 1px solid var(--color--border); | ||
| } | ||
|
|
||
| &__link { |
There was a problem hiding this comment.
I can see in the design that the links don't include underlines which goes against the rest of the site where we've included links - it might be worth mentioning this to Ben E to see if he'd be up for adding underlines.
If not we should add them back in when viewing in high contrast mode - there's a mixin you can use here: https://github.com/torchbox/torchbox.com/blob/main/tbx/static_src/sass/config/_mixins.scss#L243
There was a problem hiding this comment.
Hi @chris-lawton thanks for flagging- I've asked Ben and he's mentioned that the underlines combined with the borders in between the links don't look the best and the arrows should indicate that these are links, so I've only added them in high contrast mode
There was a problem hiding this comment.
Hi @shyusu4 having links on underlines is something we've kept really consistent throughout the site, so although I don't have all the context, I'd be reluctant to make an exception here.
There was a problem hiding this comment.
Thank you @helenb, we've spoken to Ben about reconsidering this - will be updating this to include the underlines for links so it's consistent everywhere
| $interaction-color: var(--color--link-interaction) | ||
| $interaction-color: var(--color--link-interaction), | ||
| $width: 72px, | ||
| $height: 22px |
There was a problem hiding this comment.
Nice little enhancement : )
… to the last word
* Add LinkColumnsBlock * Add LinkColumnsBlock to service area page in pattern library * Links columns block FE draft * Add to pattern library and fine-tune styles * Add underline in high contrast mode and add tail so arrow is attached to the last word * TWE-19 | FE | Links columns block (#345) * Add underlines to links, update styles for improved accessibility --------- Co-authored-by: shyusu4 <[email protected]>
Link to Ticket
Description of Changes Made
Styled the link columns block according to the design
How to Test
Open the link_columns_block through the pattern library (http://localhost:8000/pattern-library/render-pattern/patterns/molecules/streamfield/blocks/link_columns_block.html) or view in the components pattern library page
Screenshots
Expand to see more
MR Checklist
Unit tests
Documentation
Browser testing
Data protection
Light and dark mode
Accessibility
Sustainability
Pattern library