Table-Cell - Usage

This is a Figma-only component and not relevant for Development.

The Table-Cell is not a standalone component at the moment, and can’t be used outside the Comparison Table Section. This will change in the future, once we introduce a basic table component in React.

Variants Usage

Composable Cells

The composable cell can be used when there is a need to place customised content into a cell. The layer “REPLACE” within the cell can be replaced for a locally created component. You might need to adjust the padding within the cell to keep cell heights consistent throughout.

Image Cells

There are three image sizes available, that use the Image-Placeholder component. The image width is fixed, but the aspect ratio can be changed.

Image (w60px) — Ideal for thumbnails
Image (w100px)
Image (fill) — This placeholder will span the full width of the cell.

For any other image width, it is easiest to use the composable cell instead.

Using product logos

In Figma, Product logos are set up to scale, which makes them difficult to use in the image cell (they don’t resize properly). The best way to use a product logo is, to use the composable cell instead.

Notes on Accessibility

It is important to understand how Tables are handled by assistive technology. They requires detailed handover notes to make it work as smoothly as possible. Please see the Accessibility and Handover page for full breakdown.