The following diagrams illustrate the padding and typographical details for the elements included in the lists.

Example

List Worked Example

Please note:

When creating a list all cells within that list must be the same height. Therefore A, the 80 high cell with 1 line of text is only to be used inconjuction with B and/or C.

Box and Icon Ratio

The Font Awesome icon is 50% of the background box

Box: 50, Icon: 25

List Icon Example

Box: 30, Icon: 15

List Icon Example

Lists with Icons

With icon, 50 high

List Icon Example

Zoomed View

List Icon Example Zoomed

Option

List Example - 1 line

With icon, 80 high

List Example - 2 lines

Zoomed View

List Example - 2 lines Zoomed

Options

List Example - Icon Title
List Example - Icon Title Subtitle
List Example - Icon Title Title Subtitle
List Example - Icon Title Subtitle Subtitle
List Example - Icon Title Title Timestamp
List Example - Icon Title Subtitle Time Stamp
List Example - Icon Title Time Stamp Other Information

Option - with Ranking

List Example - Ranking Icon Title Subtitle

Lists without Icons

Without icon, 50 high

List Example - 1 line

Zoomed View

List Example - 1 line

Option

List Example - 1 line

Without icon, 60 high

List Example 60 High

Zoomed View

List Example 60 High Zoomed

Options

List Example - 1 line
List Example - 1 line

Without icon, 80 high

List Example

Zoomed View

List Example Zoomed

Options

List Option
List Option
List Option

Lists with Action Buttons

Action button on the right

50 high
Action Button Title Chevron

Zoomed View

Action Button Example Chevron

Options

Action Button Title Check
80 high
Action Button Message Badge

Action buttons in Bullish Green and Bearish Red

Bull Bear Hex Values
50 high
Action Button Circle Plus

Zoomed View

Action Button Circle Plus

Option

Action Button Circle Minus
60 high
Action Button Watchlist Bull
Action Button Watchlist Bear
Action Button Edit Trash

List Separators

List Separators Example

Zoomed View

List Separators Example Zoomed