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