Message Figma Code Connected

Message is a conversational message wrapper to show messages in a friendly way. Branded versions offer product color accents for the first person.

Default message

Create a default Message by adding the class .hc-message to any element, typically a block-level element. It’s recommended that you also add a recipient class as well for the positioning and layout: .hc-message--sent or .hc-message--received. More on this below.

The overall structure of the message should include at most 3 child elements all as siblings. It doesn’t matter which order these elements are placed, just as long as they have the correct class names.

.hc-message-user: Contains either a menu button or a user avatar.
.hc-message-content: The message content. This should typically be a distinct message; multiple messages should be in multiple Message components.
.hc-message-meta: Wrapper for the message’s sent time (.hc-message-time) and read receipt (.hc-message-receipt), if relevant.

Message with all elements present, including a menu button and meta info. 2:30pm

Message without the meta element below this.

HTML

Expand Edit in Playground Copy


<div class="hc-message">
  <span class="hc-message-user">
    <button class="hc-button hc-button--icon" aria-label="Menu">
      <i class="hc-icon hc-icon--more-vertical hc-icon--20"></i>
    </button>
  </span>
  <span class="hc-message-content">Message with all elements present, including a menu button and meta info.</span>
  <span class="hc-message-meta">
    <time class="hc-message-time" datetime="20241120T143000">2:30pm</time>
    <span class="hc-message-receipt" aria-label="Message read by all">
      <i class="hc-icon hc-icon--checks hc-icon--16"></i>
    </span>
  </span>
</div>
<div class="hc-message">
  <span class="hc-message-user">
    <button class="hc-button hc-button--icon" aria-label="Menu">
      <i class="hc-icon hc-icon--more-vertical hc-icon--20"></i>
    </button>
  </span>
  <span class="hc-message-content">Message without the meta element below this.</span>
</div>

The message wrapper uses a grid-template to position everything, accounting for sender and which elements are present. The grid will automatically adjust based on these elements’ presence or lack thereof.

Sent and received styles

Adding the classes .hc-message--sent and .hc-message--received will toggle the message position and colors.

For messages received, we recommend adding an Avatar for the message sender. For messages sent by the active user, while you can repeat this users avatar as well, you can provide an action button here that might be more useful.

If you only knew the power of the Dark Side. Obi-Wan never told you what happened to your father. 9:48pm

He told me enough!

He told me you killed him! 9:49pm

No. I am your father. 9:49pm

🤯 9:50pm

HTML

Expand Edit in Playground Copy


<div class="hc-message-group">
  <div class="hc-message hc-message--received">
    <span class="hc-message-user">
      <span class="hc-avatar">
        <img src="https://i.imgur.com/eLpaxE9.png" class="hc-avatar-image" />
      </span>
    </span>
    <span class="hc-message-content">
      If you only knew the power of the Dark Side. Obi-Wan never told you what happened to your father.
    </span>
    <span class="hc-message-meta">
      <time class="hc-message-time" datetime="20241120T143000">9:48pm</time>
      <span class="hc-message-receipt" aria-label="Message read by all">
        <i class="hc-icon hc-icon--checks hc-icon--16"></i>
      </span>
    </span>
  </div>
  <div class="hc-message hc-message--sent">
    <span class="hc-message-user">
      <button class="hc-button hc-button--icon" aria-label="Menu">
        <i class="hc-icon hc-icon--more-vertical hc-icon--20"></i>
      </button>
    </span>
    <span class="hc-message-content">
      He told me enough!
    </span>
  </div>
  <div class="hc-message hc-message--sent">
    <span class="hc-message-content">
      He told me you killed him!
    </span>
    <span class="hc-message-meta">
      <time class="hc-message-time" datetime="20241120T143000">9:49pm</time>
      <span class="hc-message-receipt" aria-label="Message read by all">
        <i class="hc-icon hc-icon--checks hc-icon--16"></i>
      </span>
    </span>
  </div>
  <div class="hc-message hc-message--received">
    <span class="hc-message-user">
      <span class="hc-avatar">
        <img src="https://i.imgur.com/eLpaxE9.png" class="hc-avatar-image" />
      </span>
    </span>
    <span class="hc-message-content">
      No. I am your father.
    </span>
    <span class="hc-message-meta">
      <time class="hc-message-time" datetime="20241120T143000">9:49pm</time>
      <span class="hc-message-receipt" aria-label="Message read by all">
        <i class="hc-icon hc-icon--checks hc-icon--16"></i>
      </span>
    </span>
  </div>
  <div class="hc-message hc-message--sent">
    <span class="hc-message-user">
      <button class="hc-button hc-button--icon" aria-label="Menu">
        <i class="hc-icon hc-icon--more-vertical hc-icon--20"></i>
      </button>
    </span>
    <span class="hc-message-content">
      🤯
    </span>
    <span class="hc-message-meta">
      <time class="hc-message-time" datetime="20241120T143000">9:50pm</time>
      <span class="hc-message-receipt" aria-label="Message read by all">
        <i class="hc-icon hc-icon--checks hc-icon--16"></i>
      </span>
    </span>
  </div>
</div>

Branded sent messages

You can force the theme’s color tint on sent messages by adding .hc-message--brand to either the individual sent message itself or the message group to apply this to all sent messages inside the group.

If you’d like to enforce a particular brand’s colorway, instead add .hc-message--boost (or a different brand class) to these same elements.

The possibility of successfully navigating an asteroid field is approximately 3,720 to 1... 1:00pm

Never tell me the odds! 1:00pm

HTML

Expand Edit in Playground Copy


<div class="hc-message-group hc-message--boost">
  <div class="hc-message hc-message--received">
    <span class="hc-message-user">
      <span class="hc-avatar">
        <img src="https://i.imgur.com/cit9Cjx.png" class="hc-avatar-image" />
      </span>
    </span>
    <span class="hc-message-content">
      The possibility of successfully navigating an asteroid field is approximately 3,720 to 1...
    </span>
    <span class="hc-message-meta">
      <time class="hc-message-time" datetime="20241120T143000">1:00pm</time>
      <span class="hc-message-receipt" aria-label="Message read by all">
        <i class="hc-icon hc-icon--checks hc-icon--16"></i>
      </span>
    </span>
  </div>
  <div class="hc-message hc-message--sent">
    <span class="hc-message-user">
      <button class="hc-button hc-button--icon" aria-label="Menu">
        <i class="hc-icon hc-icon--more-vertical hc-icon--20"></i>
      </button>
    </span>
    <span class="hc-message-content">
      Never tell me the odds!
    </span>
    <span class="hc-message-meta">
      <time class="hc-message-time" datetime="20241120T143000">1:00pm</time>
      <span class="hc-message-receipt" aria-label="Message read by all">
        <i class="hc-icon hc-icon--checks hc-icon--16"></i>
      </span>
    </span>
  </div>
</div>

Message groups

Wrap all messages inside of a block level element with class .hc-message-group to automatically handle gaps and positioning. The previous example uses this wrapper element.

Note that the rounded corners on message bubbles and the gaps between messages are automatically handled without any additional classes beyond the sent and received identifiers.