Shared Tab component

[oliverlloyd]

Tab

A component to centralise the design for a Guardian Tab

Each of these pages have 'tabs' but with varying styles and features. We might not want all of these pages to have their tabs be identical but perhaps there's some crossover making a shared component worth it?

Tabs are often used as one of the core methods for navigation so by centralising them we can bring accessibility benefits.

https://manage.theguardian.com/help-centre
https://profile.theguardian.com/reset
https://manage.theguardian.com/billing
https://www.theguardian.com/about/history
https://www.theguardian.com/uk

[dom-whooley]

I will check but I think the last Sign and Register tabs with the white highlight and darker blue background can be removed.

[i-hardy]

I think it's important to draw a distinction between this kind of style for navigation links- we also have them on support.theguardian.com- or section headings, and tabs/tab panels as an interface, which refers to a specific kind of interactive component. We have an example of the latter on the paper subscriptions landing page.

The sign in/register example looks like it's actually a tabbed interface, but I think calling the other examples 'tabs' is a little misleading, as frequently they're just regular links or it's just a visual style around a heading.

[oliverlloyd]

This is an excellent point @i-hardy. It really does look like there are two separate things here, the Tab as a navigation tool and the 'Tab' as a heading. The last example with Sign In + Register side by side made me conflate them but based on what @dom-whooley said, that example is no longer valid.

I also agree with you that in this case, where there is no navigational aspect, then 'Tab' as the name is misleading.

I wonder if reducing scope like this leaves us in a position where the case for this as a component is not so strong? I would still like to see this heading text have consistent height and padding over multiple pages though, but perhaps the solution is a shared SubHeader component instead?

[dom-whooley]

Agreed, the first 3 are subheaders, of which a component could be made. The following 2 are navigations. The last one only exists as a design only, which is in the process of being changed to align with the first navigation version (yellow highlight)