MessageEmbed

The card for something embedded in a message: a link card, or the base that other embedded cards build on. It has the structure of a file card (MessageAttachment) with the header of a message (MessageItem), and sits in MessageItemEmbedded, under the message body. MessageForwardedBundle and MessageActionCard render on it, and MessageReplies uses its container.

When to use

Anatomy

• MessageEmbed: the card, on layer-card with a line-hairline border and radius-container. Required.
• MessageEmbedHeader: the top row, with its own padding. Holds what the card is and where it comes from.
• MessageEmbedContent: the body. It has no padding of its own: the content inside sets it, so an image or a list of items can run to the card's edges.
• MessageEmbedFooter: the bottom row, padded like the header. Holds the card's actions.

Only MessageEmbed is required; use the parts the content needs.

Behavior

• The card and its parts can shrink below the width of their content, so long content wraps or truncates inside the card instead of widening the message.
• A card rendered as a link shows the focus ring on keyboard focus (States).

Accessibility

• MessageEmbed and its parts are plain div elements built with Base UI useRender; use render to change the element.
• When the whole card opens something, render MessageEmbed as an <a> and give it an accessible name that says what opens.
• Don't put a button inside a card rendered as a link: each control must be its own element, as in MessageAttachment.

Rules

• Build every embedded card on MessageEmbed, without new colors, shapes or lines (Composites).
• Put the card in MessageItemEmbedded, after the body and the attachments.