Grid Code

Your starting point is a universal grid, divided into equal parts. It should be applied across all devices. This grid show is fluid and proportionally scales to fit any screen size.

Colours Code

These colours are for designer reference only. For accessibility reasons, please also note the colour of the text being used.

Typography Code

Only a single Page Title can exist on a page at one time. All other titles can be used multiple times. Helvetica/Arial/Verdana should be used as fallback for when Sky fonts aren't available within the browser. When mixing SkyTextMedium and skyTextRegular weights, Medium should always come first.

Icons Code

Buttons Code

Spinners Code

Accordion Code

Breadcrumbs Code

Carousel Code

Currently doesn't work on microsoft touch devices (pointer events)

Form Code

In-page Nav Code

These modules are not yet complete. If you need them, please complete 'accessibility' checks an re-submit.

Lightbox Code

A lightbox should be used when providing auxiliary information that needs to focus the all of the users attention. The Lightbox is centered and covers 10 columns of the grid. The lightbox should then contain a new 12 column grid. The lightbox goes full-width in mobile view.

Share Code

A component to share external articles.

Tooltip Code

A tooltip should be used when providing auxiliary information that doesn't need all of the users attention. Activated via a hover over an element.

Video Code

A wrapper for the Sky video player, The video will expand to fit the ratio of the video.

Detect Code

Event Code

Hash Manager Code

This is useful for maintaining state i.e. ensuring clicks, page refreshes and bookmarked links all arrive in the same state.

Libraries Code

The toolkit provides static urls to a number of external libraries.

Responsive Images Code

Toggle Code

Error Page Code