We use this ‘tabbing’ system to show what TV channels are included in each TV package.
Unselected: Border #DDD
Selected: Fill #666
Hover/press: Border #6400AA
If there’s not enough space to show all tabs of the package selector, we use scroll buttons on either side to indicate and access more content.
Restricted width package selector with no items to the left, more items to the right.
Clicking on the ‘scroll’ button once will move the tabs one clear item to the left or right as appropriate. The tabs don’t loop – they’ll only move left or right until the last item is reached.
Note: see the component library for full specification and responsive behaviour.
No content: Fill #DDD
Content available: Fill #6400AA
Hover/press: Fill #540E85