Style Guide
Search…
Message Bubbles
Message Bubbles are populated with messages sent between pros and customers.

Usage of Message Bubbles

Message bubbles include the message from the user and the time it was sent. Depending on the context and length of the messages, the style of message bubble changes.

Types of Message Bubbles

Sent Messages (m-message-sent)

When a user is sending the message to another message, that message will be populated in the chat detail view. Depending on the length of the message, the UI's max width will change.
1. Container
background: blue-medium-light
border-radius: 5px
m-message-sent-long:
max-width: 66.667% (excluding margins)
m-message-sent-medium:
max-width: 50% (excluding margins)
m-message-sent-short:
max-width: 33.333% (excluding margins)
2. Message Text (a-text-paragraph)
font-weight: book
font-size: 16px
font-color: text-black
padding-top: 16px
padding-left: 12px
padding-right: 12px
padding-bottom: 8px
3. Time Stamp (a-text-label) After 24 hours, the message time stamp will reflect the date (mm/dd) and time (XX:XX) it was sent.
font-weight: book
font-size: 10px
font-color: slate-dark
padding-top: 8px
padding-bottom: 16px

Received Messages (m-message-received)

Received messages will adopt most of the stylings of sent messages.
1. Container
background: dark-white
border-radius: 5px
m-message-sent-long:
max-width: 66.667% (excluding margins)
m-message-sent-medium:
max-width: 50% (excluding margins)
m-message-sent-short:
max-width: 33.333% (excluding margins)
2. Message Text (a-text-paragraph)
font-weight: book
font-size: 16px
font-color: text-black
padding-top: 16px
padding-left: 12px
padding-right: 12px
padding-bottom: 8px
3. Time Stamp (a-text-label) After 24 hours, the message time stamp will reflect the date (mm/dd) and time (XX:XX) it was sent.
font-weight: book
font-size: 10px
font-color: slate-dark
padding-top: 8px
padding-bottom: 16px
Last modified 2yr ago
Copy link
On this page
Usage of Message Bubbles
Types of Message Bubbles
Sent Messages (m-message-sent)
Received Messages (m-message-received)