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

Basic Quote with Attribution

The minimal form: slot the quoted text into the default slot and slot the attribution into the author slot. Both slots accept plain text, HTML, or components.

<mds-quote tag="h3" typography="h3">
  Chi smette di migliorare, smette di essere buono.
  <mds-author slot="author">
    <mds-text typography="h6">Philip Rosenthal</mds-text>
    <mds-text typography="caption">Imprenditore</mds-text>
  </mds-author>
</mds-quote>

Quote Without Attribution

Omit the author slot entirely when no attribution is needed. The decorative quotation marks still render correctly.

<mds-quote tag="h4" typography="h4">
  La semplicita' e' la massima sofisticazione.
</mds-quote>

Decoupling Semantic Tag from Visual Scale

Set tag to the heading level that correctly represents the quote in the document outline, and typography independently for the visual weight that suits the design. A large pull-quote may be visually h2 but logically only an h4 in the hierarchy.

<!-- visually prominent (h2 scale) but semantically an h4 in the outline -->
<mds-quote tag="h4" typography="h2">
  Il futuro appartiene a chi crede nella bellezza dei propri sogni.
  <mds-author slot="author">
    <mds-text typography="h6">Eleanor Roosevelt</mds-text>
  </mds-author>
</mds-quote>

Using the action Typography Scale

Set typography="action" when the quote should adopt the action type style rather than any heading scale - for instance inside a callout card or a narrow testimonial widget.

<mds-quote tag="h5" typography="action">
  Ogni grande impresa inizia con un piccolo passo coraggioso.
  <mds-author slot="author">
    <mds-text typography="caption">Autore sconosciuto</mds-text>
  </mds-author>
</mds-quote>

Full Author Attribution with Avatar

The author slot accepts rich compound components. Use mds-author with a nested mds-avatar for a complete testimonial block.

<mds-quote tag="h5" typography="h5">
  Un programmatore e' una macchina che trasforma il caffe' in codice.
  <mds-author slot="author">
    <mds-avatar
      slot="avatar"
      initials="PW"
      src="./paul-washam.webp"
    ></mds-avatar>
    <mds-text typography="h6">Paul Washam</mds-text>
    <mds-text typography="caption">Software engineer</mds-text>
  </mds-author>
</mds-quote>

Composing Inside a Card

Place <mds-quote> inside mds-card-content to embed a testimonial in a card layout. Use a smaller typography scale to fit the card’s visual hierarchy.

<mds-card>
  <mds-card-content slot="content">
    <mds-quote tag="h6" typography="h6">
      La qualita' non e' mai un caso; e' sempre il risultato di uno sforzo intelligente.
      <mds-author slot="author">
        <mds-text typography="h6">John Ruskin</mds-text>
        <mds-text typography="caption">Critico d'arte</mds-text>
      </mds-author>
    </mds-quote>
  </mds-card-content>
</mds-card>

Color Customization via Host Styles

<mds-quote> inherits color from its host context. Override the text color by setting a semantic color role on the host element. Always use rgb(var(--magma-<role>)) so dark mode, named themes and high-contrast modes keep working.

.featured-testimonial mds-quote {
  color: rgb(var(--magma-text-default));
}