The first example of the Pattern page, live.

Overview

The <mds-author> web component is the layout primitive of the Magma Design System for presenting a person’s identity: it pairs an avatar with author information (name, role, or any related details). It exposes no props and acts purely as a slotted container, arranging an optional avatar slot beside a default content slot.

Semantic Behavior

Conditional avatar rendering: The avatar column appears only while a direct child assigned to slot="avatar" is present, also when it is added after the first render, so omitting it produces no empty column.Default slot is content, not text: The default slot is meant to hold structured author information (typically stacked mds-text elements for name and role) rather than a single inline label.Responsive collapse: Below ~200px wide the avatar stacks above the info and they center, so the same markup adapts from a horizontal row to a compact vertical card.Compound usage: It is designed to wrap an mds-avatar in the avatar slot; the avatar element owns initials/image fallback logic, while <mds-author> only positions it.

Properties & Visual Configurations

This component has no properties. All configuration is expressed through its two slots: avatar slot: the leading element, recommended to be an mds-avatar. Its presence is what toggles the two-column layout.default slot: the trailing block holding the author’s textual details, laid out so multiple lines stack cleanly and shrink to the available width (set truncate on an mds-text to cut a long line). See agents/conventions.md for the shared compound-component conventions and the usage contract.