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
  • Usages of Message Cards
  • Types of Message Cards
  • Anatomy of Unread Message
  • Anatomy of Read Message

Was this helpful?

  1. Native
  2. Action Cards

Message Cards

Message cards give the user a preview of the last message they received. It also leads the user to the message thread, where they can respond.

PreviousList CardsNextUser Cards

Last updated 5 years ago

Was this helpful?

Usages of Message Cards

Message cards are found in the messages tab. It will reflect key information like the image of the person who sent the message, the time the message was sent, and a preview of the message.

Types of Message Cards

Anatomy of Unread Message

Unread message cards are used to represent a new message or messages that have not been opened. Like other cards, unread message cards are stacked vertically in sequential order (the most recent at the top).

a-avatar-unread:
max-height: 64px
max-width: 64px
border-color: blue-medium
border-width: 3px
padding-right: 16px

2. Sender Name (a-text-h4)

a-text-paragraph-bold:
font-size: 16px
font-weight: bold
font-color: text-black

3. Time (a-text-subtitle-medium) Reflects when the last message was sent.

a-text-subtitle-medium:
font-size: 12px
font-weight: medium
font-color: text-black
padding-right: 32px

4. Message: (a-text-paragraph) This area will house the preview the first 2 lines of the message.

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

Padding:
padding-left: 16px
padding-right: 16px

5. Divider Line (a-divider-light-343) For easy viewing and consumption, cards will have divider lines.

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

Anatomy of Read Message

Read messages will adopt a lot of the spacing and structure of the unread message. The only differences will be text treatment.

1. Read Avatars (a-avatar-read) Will adopt the same avatar styling but with no blue indicator

a-avatar-read:
max-height: 64px
max-width: 64px
opacity: 75%
padding-right: 16px
padding-left: 16px

2. Sender Name (a-text-paragraph)

a-text-paragraph-tert:
font-size: 16px
font-weight: book
font-color: slate-dark

3. Time (a-text-subtitle)

a-text-subtitle:
font-size: 12px
font-weight: book
font-color: slate-medium-dark
padding-right: 32px

4. Message (a-text-paragraph-tert)

a-text-paragraph-tert:
font-size: 16px
font-weight: book
font-color: slate-medium-dark

Padding:
padding-left: 16px
padding-right: 14px

5. Divider Line (a-divider-light-343) For easy viewing and consumption, cards will have divider lines.

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

1. Unread Indicator (a-avatar-unread) If the message is unread, the avatar will have an outline around it to indicate that the message is unread. In the consumer app, an or the (for customers with no profile picture) can be used. In the pro app, an or the (for pros with no profile picture) can be used.

1. Unread Message Card (m-card-message-unread)
2. Read Message Card (m-card-message-read)
Image Avatar
Customer Default Avatar
Image Avatar
Pro Default Avatar
Unread Message Card
Read Message Card