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.
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
1. Unread Message Card (m-card-message-unread)
2. Read Message Card (m-card-message-read)
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).
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.
2. Sender Name (a-text-h4)
3. Time (a-text-subtitle-medium) Reflects when the last message was sent.
4. Message: (a-text-paragraph) This area will house the preview the first 2 lines of the message.
5. Divider Line (a-divider-light-343) For easy viewing and consumption, cards will have divider lines.
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
2. Sender Name (a-text-paragraph)
3. Time (a-text-subtitle)
4. Message (a-text-paragraph-tert)
5. Divider Line (a-divider-light-343) For easy viewing and consumption, cards will have divider lines.
Last updated
Was this helpful?