Message

Message Figma

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.

Sent message with all elements present, including a menu button and meta info.
FL Sender's name Received message with all sender elements present, including the sender's name and avatar.
Sent 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">Sent 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 hc-message--received">
  <span class="hc-message-user">
    <a href="/" aria-label="Anakin Skywalker">
      <span class="hc-avatar">FL</span>
    </a>
  </span>
  <span class="hc-message-sender">Sender's name</span>
  <span class="hc-message-content">Received message with all sender elements present, including the sender's name and avatar.</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">Sent 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.

Message types

Various types of messages are supported, including directional messages (sent and received), attachments, and branded messages.

Sent and received messages

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.

Avatar image Anakin Skywalker If you only knew the power of the Dark Side. Obi-Wan never told you what happened to your father.
He told me enough!
He told me you killed him!
Avatar image Anakin Skywalker No. I am your father.
🤯
html
Expand Edit in Playground Copy 

<div class="hc-message-group">
  <div class="hc-message hc-message--received">
    <span class="hc-message-user">
      <a href="/" aria-label="Anakin Skywalker">
        <img src="https://i.imgur.com/eLpaxE9.png" class="hc-avatar hc-avatar-image" alt="Avatar image" />
      </a>
    </span>
    <span class="hc-message-sender">
      Anakin Skywalker
    </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">
      <a href="/" aria-label="Anakin Skywalker">
        <img src="https://i.imgur.com/eLpaxE9.png" class="hc-avatar hc-avatar-image" alt="Avatar image" />
      </a>
    </span>
    <span class="hc-message-sender">
      Anakin Skywalker
    </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" data-emoji-only>
      🤯
    </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>

Attachments

You can embed any type of media within a message container to display an attachment. Typical media types would be images, PDFs, links, or documents.

These messages should append the modifier .hc-message--attachment to the message element. You can further append the modifier class for each one of these in the format of .hc-message--image to get special treatment for that media type as well. Classes include image, doc, and link.

Avatar image FN-2187 The Pinnacle Dinner Menu (2025).pdf 256kb · PDF Document
The Pinnacle | Home URL · https://pinnaclecoruscant.com
in case that PDF doesn't come thru
Photo of the boys
Great time tonight!
html
Expand Edit in Playground Copy 

<div class="hc-message-group">
  <div class="hc-message hc-message--received hc-message--attachment hc-message--pdf">
    <span class="hc-message-user">
      <a href="/" aria-label="FN-2187" class="hc-avatar">
        <img src="https://i.imgur.com/odruGOc.png" class="hc-avatar hc-avatar-image" alt="Avatar image" />
      </a>
    </span>
    <span class="hc-message-sender">
      FN-2187
    </span>
    <a class="hc-message-content hc-message-preview" href="javascript:;">
      <span class="hc-message-preview--type">
        <i class="hc-icon hc-icon--pdfs"></i>
      </span>
      <span class="hc-message-preview--info">
        <span class="hc-message-preview--primary">The Pinnacle Dinner Menu (2025).pdf</span>
        <span class="hc-message-preview--secondary">256kb &middot; PDF Document</span>
      </span>
    </a>
  </div>
  <div class="hc-message hc-message--received hc-message--attachment hc-message--url">
    <a class="hc-message-content hc-message-preview" href="javascript:;">
      <span class="hc-message-preview--type">
        <i class="hc-icon hc-icon--link"></i>
      </span>
      <span class="hc-message-preview--info">
        <span class="hc-message-preview--primary">The Pinnacle | Home</span>
        <span class="hc-message-preview--secondary">URL &middot; https://pinnaclecoruscant.com</span>
      </span>
    </a>
  </div>
  <div class="hc-message hc-message--received">
    <span class="hc-message-content">
      in case that PDF doesn't come thru
    </span>
    <span class="hc-message-meta">
      <time class="hc-message-time" datetime="20241120T143000">6:17pm</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 hc-message--attachment hc-message--image">
    <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>
    <a class="hc-message-content" href="javascript:;">
      <img src="https://i.imgur.com/jntUh7f.jpeg" alt="Photo of the boys">
    </a>
  </div>
  <div class="hc-message hc-message--sent">
    <span class="hc-message-content">
      Great time tonight!
    </span>
    <span class="hc-message-meta">
      <time class="hc-message-time" datetime="20241120T143000">1:04am</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>

Open Graph media previews

A subset of attachment messages are those with Open Graph images and other meta data. Create one of these by instead using a message container with class .hc-message--og.

These are best used for URLs that have a big banner image (when present) instead of the simple URL treatment above.

Available attributes are title, image, description, and url.

Avatar image FN-2187 Open graph media preview Why the World Needs a Second Death Star It is with great resolve that I address the pressing need for another Death Star. Too long have we ignored the crucial issue plaguing our tenuous society.
Looks like things are gonna get interesting 👀
html
Expand Edit in Playground Copy 

<div class="hc-message-group">
  <div class="hc-message hc-message--received hc-message--og">
    <span class="hc-message-user">
      <a href="/" aria-label="FN-2187" class="hc-avatar">
        <img src="https://i.imgur.com/odruGOc.png" class="hc-avatar hc-avatar-image" alt="Avatar image" />
      </a>
    </span>
    <span class="hc-message-sender">
      FN-2187
    </span>
    <a class="hc-message-content hc-message-preview" href="javascript:;">
      <img src="/img/docs/opengraph.png" class="hc-message-preview--image" alt="Open graph media preview" />
      <span class="hc-message-preview--info">
        <span class="hc-message-preview--primary">Why the World Needs a Second Death Star</span>
        <span class="hc-message-preview--secondary hc-message-preview--secondary--more">It is with great resolve that I address the pressing need for another Death Star. Too long have we ignored the crucial issue plaguing our tenuous society.</span>
      </span>
    </a>
  </div>
  <div class="hc-message hc-message--received">
    <span class="hc-message-content">
      Looks like things are gonna get interesting 👀
    </span>
    <span class="hc-message-meta">
      <time class="hc-message-time" datetime="20241120T143000">6:17pm</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>

Meta information after the title, like description or URL, should have class .hc-message-preview--secondary. You can stack multiples and they will appear in order vertically. They are capped at 1 line by default, but to increase this to 2 lines append the class .hc-message-preview--secondary--more.

Branded sent messages

You can force the theme’s color tint on sent messages by adding .hc-theme 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-theme--boost (or a different brand class) to these same elements.

Avatar image C3-P0 The possibility of successfully navigating an asteroid field is approximately 3,720 to 1...
Never tell me the odds!
html
Expand Edit in Playground Copy 

<div class="hc-message-group hc-theme">
  <div class="hc-message hc-message--received">
    <span class="hc-message-user">
      <a href="/" aria-label="C3-P0" class="hc-avatar">
        <img src="https://i.imgur.com/cit9Cjx.png" class="hc-avatar hc-avatar-image" alt="Avatar image" />
      </a>
    </span>
    <span class="hc-message-sender">
      C3-P0
    </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>

Emoji-only messages

To increase the size of emojis when they’re the only characters within a message (similar to how Slack, iOS Messages, and other chat clients handle emoji-only messages), add the data-emoji-only attribute to the .hc-message-content element.

Avatar image FN-2187 💀⭐️
🤣
html
Expand Edit in Playground Copy 

<div class="hc-message-group hc-theme">
  <div class="hc-message hc-message--received">
    <span class="hc-message-user">
      <a href="/" aria-label="FN-2187" class="hc-avatar">
        <img src="https://i.imgur.com/odruGOc.png" class="hc-avatar hc-avatar-image" alt="Avatar image" />
      </a>
    </span>
    <span class="hc-message-sender">
      FN-2187
    </span>
    <span class="hc-message-content" data-emoji-only>
      💀⭐️
    </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" data-emoji-only>
      🤣
    </span>
    <span class="hc-message-meta">
      <time class="hc-message-time" datetime="20241120T143000">1:01pm</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.

Groups separated by time

Individual message groups should be used when large blocks of time separate messages. You can also add the day or time in between groups inside the class .hc-message-group-divider to center the day or time as a group divider.

Message window

Wrap messages inside of a message window container optimized for small screens or embedded in desktop windows.

The container should have class .hc-message-window and messages should sit inside of groups as documented above. The entire HTML hierarchy, as shown below, should be:


.hc-message-window
  ├── header.hc-message-header
  ├── section.hc-message-scroll
  │     ├── .hc-message-group
  │     ├── .hc-message-group-divider
  │     ├── .hc-message-group
  │     ╰── ...
  ╰── footer.hc-message-footer
Avatar image
Luke Skywalker (Anakin)
Don't talk to me ever again!
Avatar image Anakin Skywalker If you only knew the power of the Dark Side. Obi-Wan never told you what happened to your father...
He told me enough!
He told me you killed him!
Avatar image Anakin Skywalker No. I am your father.
🤯
html
Expand Edit in Playground Copy 

<div class="hc-message-window">
  <header class="hc-message-header">
    <img src="https://i.imgur.com/6kaVEFw.jpeg" class="hc-avatar hc-avatar-image" alt="Avatar image" />
    <div class="hc-message-header-names">
      <span class="hc-message-header-primary">Luke Skywalker</span>
      <span class="hc-message-header-secondary">(Anakin)</span>
    </div>
    <div class="hc-message-header-actions">
      <input type="radio" name="hc-message-control" id="hc-message-reopen" aria-label="Reopen" checked />
      <input type="radio" name="hc-message-control" id="hc-message-minimize" aria-label="Minimize" />
      <input type="radio" name="hc-message-popout" id="hc-message-attach" aria-label="Attach to bottom" checked />
      <input type="radio" name="hc-message-popout" id="hc-message-popout" aria-label="Popout" />
      <input type="radio" name="hc-message-control" id="hc-message-close" aria-label="Close" />
    </div>
  </header>
  <section class="hc-message-scroll" id="hcms">
    <div class="hc-message-group hc-theme">
      <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">
          Don't talk to me ever again!
        </span>
        <span class="hc-message-meta">
          <time class="hc-message-time" datetime="20241120T143000">1:15pm</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>
    <div class="hc-message-group-divider">
      <time class="hc-message-time" datetime="20241120T143000">Wednesday, November 19</time>
    </div>
    <div class="hc-message-group hc-theme">
      <div class="hc-message hc-message--received">
        <span class="hc-message-user">
          <a href="/" aria-label="Anakin Skywalker" class="hc-avatar">
            <img src="https://i.imgur.com/eLpaxE9.png" class="hc-avatar hc-avatar-image" alt="Avatar image" />
          </a>
        </span>
        <span class="hc-message-sender">
          Anakin Skywalker
        </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">
          <a href="/" aria-label="Anakin Skywalker" class="hc-avatar">
            <img src="https://i.imgur.com/eLpaxE9.png" class="hc-avatar hc-avatar-image" alt="Avatar image" />
          </a>
        </span>
        <span class="hc-message-sender">
          Anakin Skywalker
        </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" data-emoji-only>
          🤯
        </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>
  </section>
  <footer class="hc-message-footer">
    <button class="hc-button hc-button--icon hc-button--tertiary" aria-label="Add an attachment">
      <i class="hc-icon hc-icon--plus-circle"></i>
    </button>
    <form action="/components/message#window" class="hc-message-input" method="post">
      <input class="hc-input hc-input--raw" name="message" type="text" aria-label="Enter your message...">
      <button type="submit" class="hc-button hc-button--primary hc-theme hc-button--icon" aria-label="Submit message">
        <i class="hc-icon hc-icon--arrow-up"></i>
      </button>
    </form>
  </footer>
</div>
<button id="hc-message-window-reopen" class="hc-button hc-button--primary" onclick="document.getElementById('hc-message-reopen').checked = true;">
  Reopen the message window
</button>

Window controls

The controls that minimize, reopen, popout, re-attach, and close the message window are all handled via radio buttons and CSS.

Since only one message window may currently appear on the screen at a time, these controls use specific id values hardcoded into the CSS. Display is based on which radio buttons within two different name groups are checked at any given time.

Embedded message container

To display messages inside of a full screen or application window instead of a bottom-right widget, simply append the class .hc-message-window--full to the parent .hc-message-window element.

The header bar controls are unnecessary in this state, and the information you’d like to display in the header can certainly vary as well.

Avatar image
Luke Skywalker (Anakin)
Don't talk to me ever again!
Avatar image Anakin Skywalker If you only knew the power of the Dark Side. Obi-Wan never told you what happened to your father...
He told me enough!
He told me you killed him!
Avatar image Anakin Skywalker No. I am your father.
🤯
html
Expand Edit in Playground Copy 

<div class="hc-message-window hc-message-window--full">
  <header class="hc-message-header">
    <img src="https://i.imgur.com/6kaVEFw.jpeg" class="hc-avatar hc-avatar-image" alt="Avatar image" />
    <div class="hc-message-header-names">
      <span class="hc-message-header-primary">Luke Skywalker</span>
      <span class="hc-message-header-secondary">(Anakin)</span>
    </div>
    <div class="hc-message-header-actions">
    </div>
  </header>
  <section class="hc-message-scroll" id="hcms2">
    <div class="hc-message-group hc-theme">
      <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">
          Don't talk to me ever again!
        </span>
        <span class="hc-message-meta">
          <time class="hc-message-time" datetime="20241120T143000">1:15pm</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>
    <div class="hc-message-group-divider">
      <time class="hc-message-time" datetime="20241120T143000">Wednesday, November 19</time>
    </div>
    <div class="hc-message-group hc-theme">
      <div class="hc-message hc-message--received">
        <span class="hc-message-user">
          <a href="/" aria-label="Anakin Skywalker">
            <img src="https://i.imgur.com/eLpaxE9.png" class="hc-avatar hc-avatar-image" alt="Avatar image" />
          </a>
        </span>
        <span class="hc-message-sender">
          Anakin Skywalker
        </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">
          <a href="/" aria-label="Anakin Skywalker">
            <img src="https://i.imgur.com/eLpaxE9.png" class="hc-avatar hc-avatar-image" alt="Avatar image" />
          </a>
        </span>
        <span class="hc-message-sender">
          Anakin Skywalker
        </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" data-emoji-only>
          🤯
        </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>
  </section>
  <footer class="hc-message-footer">
    <button class="hc-button hc-button--icon hc-button--tertiary" aria-label="Add an attachment">
      <i class="hc-icon hc-icon--plus-circle"></i>
    </button>
    <form action="/components/message#window" class="hc-message-input" method="post">
      <input class="hc-input hc-input--raw" name="message" type="text" aria-label="Enter your message...">
      <button type="submit" class="hc-button hc-button--primary hc-theme hc-button--icon" aria-label="Submit message">
        <i class="hc-icon hc-icon--arrow-up"></i>
      </button>
    </form>
  </footer>
</div>