MESSAGING

Message card

Draft

A compact card that displays a message preview for messaging or notification list interfaces.

Usage

Welcome aboard

We are glad to have you. Here is what to expect next.

Common alternative names

Chat bubble, Message bubble, Conversation item

---

Anatomy

A message card supports two layout variants — artwork on top and artwork on the side. Both share the same structural parts.

Asset
(Optional)

Heading

Paragraph

🖼

Heading

Description text goes here

Learn more

CTA

Dismiss button
(Optional)

Heading

Paragraph

CTA

Heading

Description text goes here

Learn more

🖼

Asset
(Optional)

Usage guidelines coming soon.

Specs

Specs coming soon.

Content

Content guidelines coming soon.

Status & changelog

Status & changelog coming soon.

Code

---

Usage

import { MessageCard } from '@arch-ui/components';

<MessageCard
  sender="Jane Doe"
  avatar={<Avatar name="Jane Doe" size="small" />}
  message="Hey, are you available for a quick sync this afternoon?"
  timestamp="2m ago"
  onClick={() => navigate('/messages/123')}
/>

Unread state

<MessageCard
  sender="Alex Kim"
  message="The design review is scheduled for tomorrow."
  timestamp="1h ago"
  unread
/>

---

With action menu

<MessageCard
  sender="Sam Lee"
  message="Uploaded the final assets to the shared folder."
  timestamp="Yesterday"
  endEnhancer={<IconButton icon={<MoreIcon />} aria-label="Message options" />}
/>

---

Expected props

Prop	Type	Default	Description
sender	string	required	Name of the message sender.
avatar	ReactNode	--	Avatar or icon for the sender.
message	string	required	Message preview text. Typically truncated to one or two lines.
timestamp	string	--	Relative or absolute time label.
unread	boolean	false	Whether the message is unread. Applies bold styling and an unread indicator.
onClick	() => void	--	Click handler. Makes the card interactive.
endEnhancer	ReactNode	--	Content rendered at the trailing edge (e.g. action menu).
className	string	--	Additional CSS class names.

---

Accessibility

• Interactive cards should use role="button" or be wrapped in an anchor for navigation.
• The unread state should be conveyed to screen readers, e.g. via aria-label that includes "unread" or a visually hidden status text.
• The timestamp should use a <time> element with a datetime attribute for machine-readable dates.
• Ensure sufficient colour contrast between read and unread states.