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.
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.
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).
Unread Message Card
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 Image Avatar or the Customer Default Avatar (for customers with no profile picture) can be used.
In the pro app, an Image Avatar or the Pro Default Avatar (for pros with no profile picture) can be used.
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
Read messages will adopt a lot of the spacing and structure of the unread message. The only differences will be text treatment.
Read Message Card
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
Last modified 3yr ago