Chat

A conversation layout for messages on either side. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• chat, chat--start, chat--end, chat-media, chat-header, chat-footer, chat-bubble

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<ol aria-label="Conversation">
  <li class="chat chat--start">
    <div class="chat-header">Ada · 10:42</div>
    <p class="chat-bubble">Can you review this?</p>
  </li>
  <li class="chat chat--end">
    <div class="chat-header">Grace · 10:43</div>
    <p class="chat-bubble">On it.</p>
  </li>
</ol>

Variants and composition

chat--start and chat--end place direct media, header, bubble, and footer parts on opposite sides. Keep those parts directly under chat so nested chat content does not inherit the outer message’s layout. The modifiers change geometry only.

Behavior and accessibility

Use list semantics for a conversation and put speaker/time information in readable content. Start/end modifiers affect placement and bubble corners, not messaging behavior.

Reference

See the interactive Storybook specimen ↗. Continue to Checkbox or return to the Official preset overview.