Salta ai contenuti
Magma Design System
Quote<mds-quote>Generato da @maggioli-design-system/magma@2.3.0dist/documentation.json. Incapsulamento: shadow.
Questa pagina è generata dai pacchetti Magma, documentati solo in inglese.
Common incorrect uses of <mds-quote>. Each entry pairs the wrong form with the right one and a one-line reason. System-wide rules (boolean-as-string, shadow piercing, Tailwind color utilities, raw native event listening) live in agents/anti-patterns.md - they apply here too but are not repeated.
Do Not Replace <mds-quote> with a Raw <blockquote>
Hand-rolling a blockquote loses the decorative quotation marks, the decoupled typography system, and the high-contrast preference support the component provides.
<!-- INCORRECT -->
<blockquote>
<p>La semplicita' e' la massima sofisticazione.</p>
<cite>Leonardo da Vinci</cite>
</blockquote>
<!-- CORRECT -->
<mds-quote tag="h4" typography="h4">
La semplicita' e' la massima sofisticazione.
<mds-author slot="author">
<mds-text typography="h6">Leonardo da Vinci</mds-text>
</mds-author>
</mds-quote>
Do Not Put Attribution in the Default Slot
The default slot is the quote body; attribution placed there renders as quoted text and is wrapped between the opening and closing quotation glyphs. Use the author named slot for attribution.
<!-- INCORRECT -->
<mds-quote tag="h4" typography="h4">
L'innovazione distingue il leader dal seguace.
Steve Jobs, Apple
</mds-quote>
<!-- CORRECT -->
<mds-quote tag="h4" typography="h4">
L'innovazione distingue il leader dal seguace.
<mds-author slot="author">
<mds-text typography="h6">Steve Jobs</mds-text>
<mds-text typography="caption">Apple</mds-text>
</mds-author>
</mds-quote>
Do Not Omit tag and Rely on the Default Heading Level
The default tag is h3, which may be semantically wrong for the document outline. Always set tag explicitly to the level that matches the quote’s real position in the heading hierarchy.
<!-- INCORRECT - relies on h3 default regardless of page structure -->
<mds-quote typography="h5">
Ogni problema e' un'opportunita' travestita da difficolta'.
</mds-quote>
<!-- CORRECT - tag reflects the actual outline position -->
<mds-quote tag="h5" typography="h5">
Ogni problema e' un'opportunita' travestita da difficolta'.
</mds-quote>
Do Not Conflate tag and typography
tag controls the semantic heading element; typography controls the visual scale. Setting only one and assuming the other adjusts automatically is wrong - they are independent props and must both be set intentionally.
<!-- INCORRECT - sets tag but leaves typography at its h3 default,
producing an h5 semantic element that looks like an h3 -->
<mds-quote tag="h5">
Il coraggio non e' assenza di paura, ma la decisione che qualcosa e' piu' importante della paura.
</mds-quote>
<!-- CORRECT - both props set to the intended values -->
<mds-quote tag="h5" typography="h5">
Il coraggio non e' assenza di paura, ma la decisione che qualcosa e' piu' importante della paura.
</mds-quote>
Do Not Use an Invalid typography Value
typography accepts only action, h1, h2, h3, h4, h5, h6. Passing any other value (e.g. a body or caption scale) silently matches no type style: the quote renders with no type scale at all.
<!-- INCORRECT - "body" is not a valid TypographyTitleType value -->
<mds-quote tag="h5" typography="body">
Il talento vince le partite, ma il lavoro di squadra vince i campionati.
</mds-quote>
<!-- CORRECT - use a valid title typography scale -->
<mds-quote tag="h5" typography="h5">
Il talento vince le partite, ma il lavoro di squadra vince i campionati.
</mds-quote>
Do Not Wrap <mds-quote> in a Native <figure> or <cite> to Add Attribution
Adding a <figure> / <figcaption> or <cite> wrapper around or inside the component to bolt on attribution is redundant and leaves the attribution outside the component’s layout. The author slot is the right extension point.
<!-- INCORRECT -->
<figure>
<mds-quote tag="h4" typography="h4">
La creativita' e' l'intelligenza che si diverte.
</mds-quote>
<figcaption>Albert Einstein</figcaption>
</figure>
<!-- CORRECT -->
<mds-quote tag="h4" typography="h4">
La creativita' e' l'intelligenza che si diverte.
<mds-author slot="author">
<mds-text typography="h6">Albert Einstein</mds-text>
</mds-author>
</mds-quote>