Cells are composed of items containing primary and supplemental actions, which are represented by icons and text.

Cells can be used for navigation, especially on mobile, and on our apps (they're called Cells in iOS).

Cells stretch to the width of their container, and are always full width on mobile.

# Component

There are various different cell types available in NBUX. Each cell can contain a label which can be supported by a hero icon or a thumbnail image.

# Types

Cell types

# States

Cell states

# Style

# Colour

Cells can be any colour from the NBUX palette or the brand palette, however colour contrast must align to the colour contrast ratio as specified in the colour documentation.

# Shape & Elevation

Cells can have any shape & elevation styles applied to them where required. The same applies to the supporting image within a cell.

# Rules

Do

  • Use dividers between rows with lots of content
  • Use supporting visuals such as thumbnails and icons to improve scannability

Don't

  • Place visuals in the center of the cell item

# Structure

Cells have two height variants. 56 and 72. Height of 72 is usually reserved for use with the Hero icon set.

# 56

Cell with a height of 56

# 72

Cell with a height of 72

# Typography

The default font sizes are as below:

Font Size Line Height
Cell title 16pt 24pt
Cell label 12pt 20pt

Other font sizes can be used from the typescale if required, however this is not recommended.

# Supporting Elements

  • Image: 48x48 (pts)
  • Icon: 24x24 (pts)
Last Updated: 10/6/2020, 8:34:39 AM