Correct and idiomatic ways to use the <mds-author> component, ordered from most common to most specialized. Patterns assume a working knowledge of compound-component conventions documented in agents/conventions.md.

Full Byline with Avatar

The canonical form. Place an mds-avatar in the avatar slot and stack the author’s name and role in the default slot using mds-text.

<mds-author>
  <mds-avatar slot="avatar" initials="mg" src="/assets/avatars/mario-gomez.webp"></mds-avatar>
  <mds-text typography="h6">Mario Gomez</mds-text>
  <mds-text typography="caption">Responsabile editoriale</mds-text>
</mds-author>

Avatar with Initials Fallback

When no profile image is available, omit src and rely on initials. The avatar component derives a deterministic identity color from the initials, keeping people visually distinguishable.

<mds-author>
  <mds-avatar slot="avatar" initials="ag"></mds-avatar>
  <mds-text typography="h6">Anna Grandi</mds-text>
  <mds-text typography="caption">Giornalista</mds-text>
</mds-author>

Multiple Info Lines

The default slot is a grid container - any number of stacked lines render cleanly and shrink to the available width; set truncate on an mds-text to cut a long line.

<mds-author>
  <mds-avatar slot="avatar" initials="fb" src="/assets/avatars/fred-brooks.webp"></mds-avatar>
  <mds-text typography="h6">Fred Brooks</mds-text>
  <mds-text typography="caption">Ingegnere del software</mds-text>
  <mds-text typography="caption">Dipartimento IT</mds-text>
</mds-author>

Text-Only Author (No Avatar)

Omitting the avatar slot entirely collapses the avatar column. No empty space is left - the info block fills the full width.

<mds-author>
  <mds-text typography="h6">Luca Ferretti</mds-text>
  <mds-text typography="caption">Redattore capo</mds-text>
</mds-author>

Author Card Inside an Article Header

<mds-author> is typically embedded inside a card or article header, paired with a date or category label.

<mds-card>
  <mds-card-header slot="header">
    <mds-author>
      <mds-avatar slot="avatar" initials="cs" src="/assets/avatars/chiara-sala.webp"></mds-avatar>
      <mds-text typography="h6">Chiara Sala</mds-text>
      <mds-text typography="caption">Pubblicato il 3 giugno 2026</mds-text>
    </mds-author>
  </mds-card-header>
</mds-card>

Avatar with Icon for Non-Human Entities

When the author represents an organization or system - rather than a person - pass an icon slug to mds-avatar instead of initials or a photo.

<mds-author>
  <mds-avatar slot="avatar" icon="mi/baseline/business"></mds-avatar>
  <mds-text typography="h6">Redazione Magma</mds-text>
  <mds-text typography="caption">Contenuto istituzionale</mds-text>
</mds-author>

Narrow-Container Responsive Behavior

<mds-author> uses a CSS container query: inside a container narrower than 200px the avatar stacks above the info and both center automatically. No extra markup is needed - size the parent container to trigger it.

<!-- In a sidebar widget constrained to ~160px wide, the layout collapses automatically -->
<aside style="width: 160px;">
  <mds-author>
    <mds-avatar slot="avatar" initials="gv"></mds-avatar>
    <mds-text typography="label">Giulia Verdi</mds-text>
    <mds-text typography="caption">Moderatrice</mds-text>
  </mds-author>
</aside>