Overview

Purpose

The Comparison Table is used for an easy side-by-side comparison of product offers, features or pricing plans. It can be used to compare various Sky offers, or to compare a Sky product with competitors.

Anatomy

A Comparison Table can be built using following elements -

1. Differences Switch (optional)
   Switch to only display the rows where the content of the columns are different. The filter mechanism will need to be set up manually in Development.

2. Scrolling (as required)
   Navigation to scroll to the next/previous column. The size of the viewport will decide whether this element is displayed or not.

3. Table-Rows
   The Comparison Table body consists of any number of rows. Table-Rows consist of Table-Cell components.

4. Text Link (optional)
   A Text Link can be used to show hidden rows.

Variants & States

Table-Rows

• Breakpoint: Desktop, Mobile
• Type: Column Header, Group Header, Content
• Cells 2—5: On/Off

There are additional variants available depending on the Type and Breakpoint.

The below examples use a dashed outline to make them easier to see.

Table-Cells

Cells are the most flexible part of the table and can hold any content.
Figma presets include Text, Button, Link, Icon, Image, Price, and Swatch.