---
title: "Sections — Comparison Table"
canonical: https://sky-ui.cf.sky.com/sections/comparison-table
---

# Sections — Comparison Table

## 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](https://www.figma.com/design/Iuy4ttzO5BxHD7qE7zXN1s/Sky-UI---Web-Components?node-id=42655-23272)** <br /> Flexible content options to provide context for the table.

2. **Comparison table** <br /> A table with two columns. In Figma, the [Table-Cell](https://www.figma.com/design/Iuy4ttzO5BxHD7qE7zXN1s/Sky-UI---Web-Components?node-id=63657-11486) component is used as a base for this particular table configuration.

3. **Key lines (optional)** <br /> Optional divider line to separate the rows within the table.

4. **Show more Button (optional)** <br /> 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.<br/>
Figma presets include Text, CTA, Icon, Image, Price, and Swatch. Have a look at the Figma-only [Table-Cell](https://www.figma.com/design/Iuy4ttzO5BxHD7qE7zXN1s/Sky-UI---Web-Components?node-id=63657-11486) component for more information on variants and options.

### Mobile

### Desktop