Comparison Table - Usage

Basic Guidelines

Types of tables

There are two types of tables, which differ in their behaviour —

1. Basic Table
Table where all columns are visually equal.

• Used to compare various Sky product offers.
• The simplest/cheapest options are typically listed in ascending order from left to right.

2. Comparison Table
Table where the first data column (the Sky option) is highlighted.

• Used to compare a Sky product to a competitor.
• The Sky option is listed first and will be highlighted with a border.
• The first data column is sticky, and therefore always visible, even on small viewports.
• The default colour of this border is grey-10, but can be adjusted to any colour or gradient.

Table structure

The top row serves as the “Column Header”, naming the options that are compared.
By default every table comes with a “Row Header” which is used to describe the information contained within the row (IE a headline for the values).

On Desktop, the rows should be set to alternate in colours to guide the reader.
On mobile, Row Header and value rows are set up in alternating colours by default.

Behaviour

Sticky elements

By default Column Headers are sticky when scrolled vertically, and Row Headers when scrolled horizontally. When scrolling down, a divider line will be introduced at the bottom of the Column Header, to separate it from scrollable content.

In a Comparison Table setup, the first column presenting the Sky option will also be sticky and therefore always visible, even on small viewports.

Example: Comparison table with highlighted Sky option, showing both

• Horizontal scroll — Sky column and Row Headers are sticky, the other columns scroll behind it.
• Vertical scroll — the Column Headers are sticky, other rows scroll behind it.

Mobile

Desktop

Highlighting columns via fill or border

Any column can use a fill colour. As soon as a fill is used, the Desktop table will no longer show alternating row colours. On Mobile, the Row Headers will still be grey.

In a Comparison Table setup, it is possible to have a coloured border around the first data column.

Row Header

Row Headers are optional and can be turned off completely or row-by-row. However, they will only be visually hidden and still be available for screen readers. Therefore, Designers are asked to provide a title for each row regardless.

Collapsable Column Header

If the Header Row holds lots of information, it’s possible to have it change into a simpler version when scrolling down. If applicable, Designers are asked to provide a version of each. A collapsed header will have a divider line on the bottom (grey-10) by default, to separate it from scrollable content. The original header is only shown at the top position before scrolling.

Grouping rows

In long tables it can be useful to create collapsable sections using “Group Headers”, which are styled like Accordions.

Variants Usage

Rows are limited to six columns, one of which serves as the "Row Header" (only on large viewports). The rest of the columns can be used to compare the different options and values.

The Cell component is the most flexible part of the table and can hold any content.

Set up in Figma

The layer “REPLACE” of the composable Cell can be replaced by a locally created component. There is no need to include a padding or a background fill in your own locally created component, as this is handled by the Cell.

Content Guidance

Keep it short and to the point. Make sure you use the same units (e.g. Mbps) where possible to make sure values are easy to compare directly.

If you need to include tooltips, make sure to use the Icon Button or Text Link as a trigger, and a Modal as a container for the content. Popovers don’t work within tables, because they will be limited to the cell they sit within.

Alignment

The Table must align with the grid system with no additional padding. It sits in-line with the rest of the content and always spans full width (minus margins) on mobile and tablet.

In a 12-column grid layout, the table sits in-line with the grid and can span up to ten columns wide. The example below is downscaled proportionally for illustration purposes.

Spacing

When the Table is used with additional elements, the following spacings are recommended:

Mobile

Desktop

Notes on Accessibility

Please see full Accessibility and Handover page for full breakdown.