Style Guide
  • Handy Style Guide
  • Brand Guidelines
    • Logo
    • Color System
    • Line Icons
    • Expressive Icons
    • Typography
  • Native
    • Action Cards
      • Booking Cards
      • Job Cards
      • List Cards
      • Message Cards
      • User Cards
    • Avatars
    • Banners
    • Callouts
    • Buttons
    • Half Sheets
    • Headers
    • Icon Lists
    • Input Fields
    • Marketing
    • Message Bubbles
    • Modal
    • Navigation
    • Pickers
    • Reviews
    • Skeleton Loading States
    • Tabs
    • Typography - Native
      • Native Text Combinations
  • Web
    • Navigation
    • Grid and Layout
    • Forms
    • Typography (Web)
    • Buttons
    • Pickers
    • Modals
    • Cards
Powered by GitBook
On this page
  • Usage of List Cards
  • List Card Types
  • Anatomy of Basic List Card (card-list-basic)
  • Anatomy of Icon List Card (card-list-icon)

Was this helpful?

  1. Native
  2. Action Cards

List Cards

List cards live in account and help pages on both customer and pro apps. Like other action cards, list items lead to underlying content pages or flows.

PreviousJob CardsNextMessage Cards

Last updated 5 years ago

Was this helpful?

Usage of List Cards

List cards can be stacked on pages where users can take multiple actions or view content. Each card should represent a single idea/concept and have a corresponding label that is clear. Overall the list should be easy to scan.

List Card Types

Anatomy of Basic List Card (card-list-basic)

The most basic variation of the list card.

1. Label (a-text-paragraph)

font-weight: book
font-size: 16px
font-color: text-black or red-medium

padding-left: 16px
pading-top: 24px
padding-bottom: 24px
max-width: 65.89% (226px)

2. Supporting Information (optional):

font-size: 16px
font-weight: book
font-color: slate-dark
padding-right: 8px

max-width: 27.4% (94px)

3. Divider (a-divider-light-343)

a-divider-light:
max-width: 343px
max-height: 1px
color: slate-light

padding-top: 24px

Anatomy of Icon List Card (card-list-icon)

To add visual interest to pages consisting only of list cards (like the Job Support pages in the pro app), the icon variation can be used.

font: font-awesome
font-size: 16px
font-weight: light
font-color: slate-dark, blue-medium-dark, red-medium

padding-left: 16px
padding-right: 4px

2. Label


font-weight: book
font-size: 16px
font-color: text-black

padding-right: 16px
pading-top: 24px
padding-bottom: 24px
padding-right: 8px

3. Divider (a-divider-light-343)

a-divider-light:
max-width: 343px
max-height: 1px
color: slate-light

padding-top: 24px

1. Label Icon is used for the label icon.

1. Basic (card-list-basic)
2. Icon (card-list-icon)
Font Awesome (a-icon-line)