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
1
background: blue-medium-light
2
border-radius: 5px
3
4
m-message-sent-long:
5
max-width: 66.667% (excluding margins)
6
7
m-message-sent-medium:
8
max-width: 50% (excluding margins)
9
10
m-message-sent-short:
11
max-width: 33.333% (excluding margins)
Copied!
2. Message Text (a-text-paragraph)
1
font-weight: book
2
font-size: 16px
3
font-color: text-black
4
5
padding-top: 16px
6
padding-left: 12px
7
padding-right: 12px
8
padding-bottom: 8px
Copied!
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.
1
font-weight: book
2
font-size: 10px
3
font-color: slate-dark
4
5
padding-top: 8px
6
padding-bottom: 16px
Copied!

Received Messages (m-message-received)

Received messages will adopt most of the stylings of sent messages.
1. Container
1
background: dark-white
2
border-radius: 5px
3
4
m-message-sent-long:
5
max-width: 66.667% (excluding margins)
6
7
m-message-sent-medium:
8
max-width: 50% (excluding margins)
9
10
m-message-sent-short:
11
max-width: 33.333% (excluding margins)
Copied!
2. Message Text (a-text-paragraph)
1
font-weight: book
2
font-size: 16px
3
font-color: text-black
4
5
padding-top: 16px
6
padding-left: 12px
7
padding-right: 12px
8
padding-bottom: 8px
Copied!
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.
1
font-weight: book
2
font-size: 10px
3
font-color: slate-dark
4
5
padding-top: 8px
6
padding-bottom: 16px
Copied!
Last modified 2yr ago