Quote<mds-quote>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
tagenumSpecifies the tag the element
typographyenumSpecifies the font typography of the element
Overview
The <mds-quote> web component is the Magma Design System primitive for rendering a stylized blockquote: it wraps quoted text in decorative typographic quotation marks (❝ ... ❞) and exposes an optional attribution slot, replacing a hand-styled <blockquote> + citation markup.
Semantic Behavior
Default slot is the quote body: the unnamed slot holds the quoted text (string, HTML, or components) and is wrapped between the opening ❝ and closing ❞ glyphs.author named slot: holds the attribution (text, HTML, or components) and renders directly beneath the quote body.Selection semantics: selecting the quote body selects the whole quotation, while the decorative quote-mark glyphs stay out of any copied text.Heading semantics vs. visual size are decoupled: the rendered tag and the applied typography are driven by two independent props, so the component can carry the correct document outline level without forcing a matching visual scale.
Properties & Visual Configurations
tag sets the actual HTML heading element emitted for the quote body (h1-h6); pick the value that reflects the quote’s real position in the document outline, independent of how large it should look.typography sets the visual type scale applied to both the quote body and the decorative marks; choose it for visual weight, since it can differ from tag. Beyond the heading scales it also accepts 'action' for cases where the quote should adopt the action type style rather than a heading scale.
Notes
<mds-quote> is a purely presentational component: it has no variant / tone ladder, no state props, no events, and no form association. The shared system rules live in agents/conventions.md.