Comparison Table - Overview

Purpose

The Comparison Table section 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 section can be broken down into following elements -

1. Section Heading
   Flexible content options to provide context for the table.

2. Comparison table
   A table with two columns. In Figma, the Table-Cell component is used as a base for this particular table configuration.

3. Key lines (optional)
   Optional divider line to separate the rows within the table.

4. Show more Button (optional)
   Button to reveal further rows of the table.

Variants & States

Section

• Breakpoint: Mobile, Desktop
• Show more: On/Off

Table-Cells

Cells are the most flexible part of the table and can hold any content.
Figma presets include Text, CTA, Icon, Image, Price, and Swatch. Have a look at the Figma-only Table-Cell component for more information on variants and options.

Mobile

Desktop