Comparison Table - Usage
Basic Guidelines
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.
Typically, the cheaper, or current option is shown in column one, and the more expensive option or a potential upgrade in column two.
Behaviour
Table header
The top row of the table is the table header, which is sticky by default. A divider line separating the header from the scrollable content appears, even if the key lines are turned off.
Keep the content within the table header as short as possible (i.e. just product name or logo). This is necessary to make sure the table works smoothly with assistive technologies. Read the Accessibility and Handover page to understand how tables are handled with assistive technologies.
Collapsible header
If the table header takes up a lot of space (i.e. it is using images), it’s possible to have it change into a simpler version when scrolling down. Designers must provide content for both the full header and collapsed version.
There cannot be any links or CTAs within the collapsible header, as it uses an aria-hidden and aria-disabled attribute, and therefore shouldn't contain any focusable content.
Table with a simplified header without images, to save space when scrolling. The scrollbar is only shown for illustration purposes.Variants Usage
Key lines
Key lines between rows are optional. They can only be turned on/off for the entire table, not for individual rows.
Colour fill
Any column or row can use a fill colour. In Figma, this is configured at Cell level.
Customisable content
The cells can hold any type of content. In Figma, this is configured at Cell level by using the composable cell variant. The layer “REPLACE” 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.
To learn more about how composable components are used in Figma, please have a look at the Designer Quickstart.
Alignment
Sections are always placed at full width of the viewport.
The below example has been downsized proportionally to fit into this documentation.
Notes on Accessibility
It is important to understand how the Comparison Table is handled by assistive technology. It requires detailed handover notes to make it work as smoothly as possible. Please see the Accessibility and Handover page for full breakdown.