Cell

Cell component is one of the most commonly used components across our applications not only, because it can consist of other components such as Checkbox, Toggle, Radio, Text, Image, Icon or Badge, but also, because it can live in organisms such as Box.

It consists of these parts — Cell Image, Cell Content, Cell Suffix and Cell Validation:

Cell Image is the only part which is aligned to the top of the cell (not centered vertically) and can contain either Image or Icon. Default size of this part is X-Large.

Cell Content is centered vertically and consists of three parts — Title, Body and Subtitle. All these parts has predefined typographic styles, but can have some level of customization. Body part can consume other types of atoms — Text, Image. Subtitle is always aligned to the top right corner of the Cell Content container. Both Title and Subtitle should both fit into single-line.

Cell Suffix is always aligned to the right side of Cell component, centered vertically and can contain other atoms as well.

Cell Validation is used only to represent validation status — Error, Success or any other. It wraps Validation component.

x-large
Image
Title
Subtitle
Body
Suffix
Validation Error

Pseudo code:

<cell>
  <cell-image>
    <icon size="large"/>
  </cell-image>
  <cell-content>
    <title/>
    <body>
      <image />
      <text />
    </body>
    <subtitle />
  </cell-content>
  <cell-suffix>
    <checkbox />
  </cell-suffix>
  <cell-validation>
    <validation theme="warning">
      Validation Error
    </validation>
  </cell-validation>
</cell>
Title

Body

Title
Body

Title
Subtitle
Body

x-large Sample image
Title
Subtitle
Body

Suffix

Cells can contain suffix - additional action or content on the right side of it’s container:

Cell with avatar as suffix
large Sample image

Cell with button
Optional body
Action

Cell with checkbox

Cell with checkbox
Suffix

Validation

Validation message is displayed when cell validation fails. It is not shown, if cell contains Input as it has its own validation.

Cell with avatar as suffix
large Sample image
Validation Error

Cell with button
Optional body
Action
Validation Error

Cell with checkbox
Validation Error

Navigating Cell with Suffix
Suffix
Validation Error

Style

Tight

Tight size is doesn’t have any paddings, so can be used as container with background for other components, or for putting one Cell into another Cell.

Title

Body

Title
Body

Title
Subtitle
Body

x-large Sample image
Title
Subtitle
Body
Validation Error
Narrow

Narrow size is mainly used when you want to put cell above or below the Box and align content accordingly.

Title

Body

Title
Body

Title
Subtitle
Body

x-large Sample image
Title
Subtitle
Body
Validation Error
Wide

Wide size is used only on wider screens (desktop, tablets).

Title

Body

Title
Body

Title
Subtitle
Body

x-large Sample image
Title
Subtitle
Body
Validation Error

Types

Navigating cell has focus/hover/click states. Cell’s background changes in the same way as with themed buttons.

Optionally, cell’s suffix may have an arrow (chevron) provided through icon component of medium size.

Title
Body
Title
Body

Themes

Cell component also has the same themes as Button component. Both, text and containing components colors should adapt to Cell theme.

Title
Body
Validation Error

Title
Body
Validation Error

Title
Body
Validation Error

Title
Body
Validation Error

Title
Body
Validation Error

Title
Body
Validation Error
Title
Body
Validation Error

Highlighting

Highlighting may be used to give more importance to certain cells or to distinguish them in a meaningful way. For example, highlighted cells could be used in message inbox where entries with “unread” state would get rendered using highlighted UI cells.

Highlighted Cell
Body
Highlighted Navigating Cell
Body

Disabled state

Disabled cells indicate parts of the product that are not available within a given context. With disabled set to true all elements in the cell become uneditable/unclickable.

Disabled Cell
Could someone enable me, please?

Examples

Inbox message list, which may consist of cells, could have highlighted attribute as an indicator of unread message status.

x-large Sample image
Alice
Thank you, I have received the bag

Feedback Reply in Profile Feedback uses Tight Cell inside of the Cell.

x-large Sample image
Giedrius Jaloveckas
2 Weeks Ago
Love the bag it came in and personalized card. Fast shipping too!
large Sample image
Deividas Grauzinis
2 Days Ago
Thanks for the great review!

Notification also uses cell component for information display with an action.

New message from podo
Uh-oh: buyer attention drought! Try uploading new pictures to sell faster!
Reply

Specifications

// Base

$cell-background-color                 : palette(cg9);
$cell-arrow-color                      : palette(cg5);

$cell-arrow-margin-left                : unit(2);

// Text

$cell-title-text-type                  : 'title';
$cell-body-text-type                   : 'body';
$cell-subtitle-text-type               : 'subtitle';
$cell-suffix-text-type                 : 'body';

// Styles

$cell-primary-background-color         : palette(cp1);
$cell-amplified-background-color       : palette(cg1);
$cell-muted-background-color           : palette(cg4);
$cell-success-background-color         : palette(cs1);
$cell-warning-background-color         : palette(cs3);
$cell-transparent-background-color     : transparent;

$cell-inverse-text-theme               : 'inverse';
$cell-inverse-arrow-color              : palette(cg9);

// Sizes

$cell-padding                          : unit(4);
$cell-spacing                          : unit(2);
$cell-image-margin-right               : $cell-spacing;
$cell-suffix-spacing                   : $cell-spacing;
$cell-title-padding-right              : $cell-spacing;
$cell-validation-padding-top           : unit(1);

$cell-tight-padding                    : unit(0);
$cell-tight-spacing                    : unit(2);
$cell-tight-image-margin-right         : $cell-tight-spacing;
$cell-tight-suffix-spacing             : $cell-tight-spacing;
$cell-tight-title-padding-right        : $cell-tight-spacing;

$cell-narrow-padding                   : unit(2);
$cell-narrow-spacing                   : unit(2);
$cell-narrow-image-margin-right        : $cell-narrow-spacing;
$cell-narrow-suffix-spacing            : $cell-narrow-spacing;
$cell-narrow-title-padding-right       : $cell-narrow-spacing;

$cell-wide-padding                     : unit(6);
$cell-wide-spacing                     : unit(3);
$cell-wide-image-margin-right          : $cell-wide-spacing;
$cell-wide-suffix-spacing              : $cell-wide-spacing;
$cell-wide-title-padding-right         : $cell-wide-spacing;

// States

$cell-highlighted-opacity-unit        : 0.08;
$cell-highlighted-background-color    : rgba(palette(cp1), $cell-highlighted-opacity-unit);
$cell-focused-darkness-unit           : 0.02;
$cell-focused-background-color        : rgba(palette(cg1), $cell-focused-darkness-unit);
$cell-clicked-background-color        : rgba(palette(cg1), $cell-focused-darkness-unit * 2);

API

name type default
style default / tight / narrow / wide default
type default / navigating default
theme none / primary / amplified / muted / success / warning / transparent none
validation string ’’
highlighted true / false false
disabled true / false false