BT.com Design Guidelines
| Introduction | Notifications | Grids | Colours | Typography | Image Sizes | Padding and Spacing | Modals | Icons | Social Norms | Dividers
| Tables | Package Selector | Timelines | Progress Indicator | CTAs and Buttons | Forms | Tooltips | Accordions | Loaders |
Package selector
We use this ‘tabbing’ system to show what TV channels are included in each TV package.
Tab states
Unselected: Border #DDD
Selected: Fill #666
Hover/press: Border #6400AA
Restricted width
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.
Scrolling action
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.
Scroll buttons
No content: Fill #DDD
Content available: Fill #6400AA
Hover/press: Fill #540E85
Changelog
1.0.1
1.0.0