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.
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.
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
- Use dividers between rows with lots of content
- Use supporting visuals such as thumbnails and icons to improve scannability
- Place visuals in the center of the cell item
Cells have two height variants. 56 and 72. Height of 72 is usually reserved for use with the Hero icon set.
The default font sizes are as below:
|Font Size||Line Height|
Other font sizes can be used from the typescale if required, however this is not recommended.
# Supporting Elements
- Image: 48x48 (pts)
- Icon: 24x24 (pts)