COMPONENTS

Message thread

One ordered-list layout arranges existing cards as conversation messages, keeping sender names, timestamps and reading order explicit.

Usage

Markup: ol.message-thread > li > article.card

Behaviour: Ordered static history. Sending, real-time updates and announcements belong to the application.

  • Use ol.message-thread > li > article.card. Existing cards supply surfaces and optional materials; existing avatars are optional. Header and footer remain semantic elements.
  • Use the existing data-variant="primary" on an outgoing message card to align it to the logical end. Include a visible sender such as "You"; alignment or colour alone must not identify ownership.
  • Messages remain in DOM order. Native time[datetime] identifies each timestamp. Visible text can supply delivery state; CSS does not invent delivery or read status.
  • The application supplies composing, sending, live updates and unread announcements. This module adds no role="log", automatic scrolling or live-region behaviour to a static history.

Component API and styling module · Inherited appearance settings

A support conversation

Existing cards and avatars with one thread layout class.

  1. Alex · Support

    Hello! How can I help with your order?

  2. You

    Could you tell me the dimensions of the Arc lamp?

    Delivered
  3. Alex · Support

    Of course: 32 × 18 × 42 cm.

HTMLSelect text to copy
<ol class="message-thread" role="list" aria-label="Order support conversation">
<li><article class="card"><header><span class="avatar" aria-hidden="true">AM</span><strong>Alex · Support</strong><time datetime="2026-10-04T10:00:00+03:00">10:00</time></header><p>Hello! How can I help with your order?</p></article></li>
<li><article class="card" data-variant="primary"><header><strong>You</strong><time datetime="2026-10-04T10:02:00+03:00">10:02</time></header><p>Could you tell me the dimensions of the Arc lamp?</p><footer>Delivered</footer></article></li>
<li><article class="card"><header><strong>Alex · Support</strong><time datetime="2026-10-04T10:03:00+03:00">10:03</time></header><p>Of course: 32 × 18 × 42 cm.</p></article></li>
</ol>