# Message threads A conversation in a card: each message with its author, time and files, the person's own at the end in a tint, the other side's at the start - edited in place, the reply box held under the thread. ## Example `ol class="thread"` of `thread-message`s; `data-mine` puts the person's own at the end in a tint. A message holds an [avatar](avatar.md) and `thread-body`: `thread-meta` - the name, a `time`, `thread-edited` and the message's buttons -, `thread-bubble`, which keeps its line breaks, and `thread-files` - thumbnails up to 9rem × 7rem, each with a `thread-file-remove` that shows while the message is edited. Editing is an [inline edit](inline-edit.md): the form takes the bubble's place. In a `card card-scroll` with a height the thread scrolls between the card's header and its footer, which holds the reply. ```html

The booking page shows the wrong price

Open
  1. Example Resort
    The child price on North Bay shows 2,500 THB. It should be 1,900 THB since Monday.
    Screenshot of the price
  2. REDZ supportedited
    Thank you - the price list was published before the change. It is fixed now; please check the page again.
    The fixed page
``` ## Accessibility - The thread is a list with a name; each message starts with its author and time in words, so the side is never told by place or tint alone. - A file's thumbnail has the file's own `alt`; its remove button is named by the file. - The scrolling body of a card is reached by `Tab` through its buttons and links; give it `tabindex="0"` and a name when it holds none. ## Tokens From [`css/components/thread.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/thread.css), which declares no custom property of its own. It reads the theme's `--redz-space-16`, `--redz-space-8`, `--redz-space-4`, `--redz-text-muted`, `--redz-fs-12`, `--redz-text`, `--redz-space-12`, `--redz-border`, `--redz-radius-12`, `--redz-radius-4`, `--redz-bg`, `--redz-primary-subtle`, `--redz-radius-8`.