Tab components

[Tomlennon21]

Hi all,
on the new tab components is there a possibility that we can bring each tab closer together? Also Warren had mentioned that they may need further development for the mobile view.

You can see an example of them here https://beta.nice.org.uk/get-involved/scholars.

Thanks

[rnickr]

Hi Tom - can you jot down some thoughts about the current spacing, explain in a bit more detail why you think they should be closer together and i can take a look, cheers.

[Tomlennon21]

Hi,
In our team crit we discussed if we could constrain the width of the tabbed content to remove the excess grey space. (see [attached).

[rnickr]

Hi Tom, the spacing on the tab title uses our standard default spacing at the min - 1rem (18px by default). Not sure what we would gain by reducing this down, we use a scale to space things so the next step down would be 0.5rem but this doesn't leave much padding around the text. What's the issue you're trying to solve by reducing the spacing?

This is what it looks like with 0.5 rem spacing either side:

For mobile, best approach i think ive seen is something like this (reduce the window down): https://codepen.io/heydon/pen/veeaEa
Thinking behind it here: https://inclusive-components.design/tabbed-interfaces/
What do you think on something like this mobile approach @wa-rren-dev?

[Tomlennon21]

I think that looks good. We would want to keep tab titles as small as possible anyway when using them.

[wa-rren-dev]

Yeah I like that approach, I think there are edge cases where it might go a bit out but if we’re prescriptive about not letting the length or number of titles get out of hand I’d imagine it would work well.

[rnickr]

ok, great, i'll add it to the design backlog to mock up a mobile version based on that pattern and we can see how it might work.