# @maggioli-design-system/mds-text > mds-text is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using. Latest version **4.7.6** (published 2026-02-19) · MIT license · 0 weekly downloads ## Install ```sh npm install @maggioli-design-system/mds-text pnpm add @maggioli-design-system/mds-text yarn add @maggioli-design-system/mds-text bun add @maggioli-design-system/mds-text ``` ## Health **Score 60/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 4.7.6 | | Published | 2026-02-19 | | First published | 2021-11-03 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 1.1 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Vittorio Vittori | | Maintainers | vitto, moodysmiles, nicola.tamburini.maggioli | ## Links - npm: https://www.npmjs.com/package/@maggioli-design-system/mds-text - npm.io page: https://npm.io/package/@maggioli-design-system/mds-text ## Dependencies (3) - [clsx](https://npm.io/package/clsx.md) 2.1.0 - [@stencil/core](https://npm.io/package/@stencil/core.md) 4.27.2 - [@maggioli-design-system/styles](https://npm.io/package/@maggioli-design-system/styles.md) 15.11.0 ## Recent versions - 4.7.6 (latest) — 2026-02-19 - 4.7.5 — 2026-01-16 - 4.7.4 — 2025-06-03 - 4.7.3 — 2025-05-14 - 4.7.2 — 2025-04-02 - 4.7.1 — 2025-03-10 - 4.7.0 — 2025-03-05 - 4.6.0 — 2025-02-25 - 4.5.3 — 2025-02-06 - 4.5.2 — 2024-12-04 - 4.5.1 — 2024-11-25 - 4.4.3 — 2024-09-26 - 4.4.2 — 2024-09-17 - 4.4.1 — 2024-09-13 - 4.4.0 — 2024-09-05 - … 40 more at https://npm.io/package/@maggioli-design-system/mds-text/versions ## README # mds-text This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using. ## Properties | Property | Attribute | Description | Type | Default | | ------------ | ------------ | -------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `animation` | `animation` | Specifies if the text is animated when it is rendered | `"none" \| "yugop" \| undefined` | `'none'` | | `tag` | `tag` | Specifies the HTML tag of the element | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "label" \| "code" \| "strong" \| "abbr" \| "address" \| "article" \| "b" \| "bdo" \| "blockquote" \| "cite" \| "dd" \| "del" \| "details" \| "dfn" \| "div" \| "dl" \| "dt" \| "em" \| "figcaption" \| "i" \| "ins" \| "kbd" \| "legend" \| "li" \| "mark" \| "ol" \| "p" \| "pre" \| "q" \| "rb" \| "rt" \| "ruby" \| "s" \| "samp" \| "small" \| "span" \| "sub" \| "summary" \| "sup" \| "time" \| "u" \| "ul" \| "var"` | `undefined` | | `text` | `text` | Specifies the text string to the component instead of passing an HTML node | `string \| undefined` | `undefined` | | `truncate` | `truncate` | Specifies if the text shoud be truncated or should behave as a normal text | `"all" \| "none" \| "word" \| undefined` | `undefined` | | `typography` | `typography` | Specifies the font typography of the element | `"action" \| "caption" \| "detail" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "hack" \| "label" \| "option" \| "paragraph" \| "snippet" \| "tip"` | `'detail'` | | `variant` | `variant` | Specifies the variant for `typography` | `"code" \| "info" \| "read" \| "title" \| undefined` | `undefined` | ## Slots | Slot | Description | | ----------- | -------------------------------------------------------------------------------------- | | `"default"` | Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here. | ## CSS Custom Properties | Name | Description | | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `--mds-text-animation-placeholder-char` | Sets the animation placeholder char of the text when `animation` attribute is set to `yugop` | | `--mds-text-animation-speed` | Sets the animation speed of the text when `animation` attribute is set to `yugop` | | `--mds-text-line-clamp` | Sets the max number of visible lines before the text overflows with ellipsis. It works only if attribute `truncate='all' is set`. **WARNING:** this is supported only by Chrome, Safare and Firefox with native browser prefixes. | | `--mds-text-selection-background` | Sets the background-color of the text when the text is selected | | `--mds-text-selection-color` | Sets the color of the text when the text is selected | ## Dependencies ### Used by - [mds-accordion-item](../mds-accordion-item) - [mds-accordion-timer-item](../mds-accordion-timer-item) - [mds-badge](../mds-badge) - [mds-banner](../mds-banner) - [mds-benchmark-bar](../mds-benchmark-bar) - [mds-bibliography](../mds-bibliography) - [mds-breadcrumb-item](../mds-breadcrumb-item) - [mds-button](../mds-button) - [mds-chip](../mds-chip) - [mds-file](../mds-file) - [mds-file-preview](../mds-file-preview) - [mds-filter](../mds-filter) - [mds-filter-item](../mds-filter-item) - [mds-img](../mds-img) - [mds-input-date-range](../mds-input-date-range) - [mds-input-field](../mds-input-field) - [mds-input-range](../mds-input-range) - [mds-input-switch](../mds-input-switch) - [mds-input-tip-item](../mds-input-tip-item) - [mds-input-upload](../mds-input-upload) - [mds-keyboard](../mds-keyboard) - [mds-keyboard-key](../mds-keyboard-key) - [mds-kpi-item](../mds-kpi-item) - [mds-label](../mds-label) - [mds-list-item](../mds-list-item) - [mds-mention](../mds-mention) - [mds-notification](../mds-notification) - [mds-paginator-item](../mds-paginator-item) - [mds-policy-ai](../mds-policy-ai) - [mds-pref](../mds-pref) - [mds-pref-animation](../mds-pref-animation) - [mds-pref-consumption](../mds-pref-consumption) - [mds-pref-contrast](../mds-pref-contrast) - [mds-pref-language](../mds-pref-language) - [mds-pref-theme](../mds-pref-theme) - [mds-price-table-features](../mds-price-table-features) - [mds-price-table-features-cell](../mds-price-table-features-cell) - [mds-price-table-list-item](../mds-price-table-list-item) - [mds-push-notification-item](../mds-push-notification-item) - [mds-quote](../mds-quote) - [mds-radial-progress](../mds-radial-progress) - [mds-status-bar](../mds-status-bar) - [mds-stepper-bar-item](../mds-stepper-bar-item) - [mds-tab-bar-item](../mds-tab-bar-item) - [mds-table-header-cell](../mds-table-header-cell) - [mds-toast](../mds-toast) - [mds-tooltip](../mds-tooltip) - [mds-url-view](../mds-url-view) ### Graph ```mermaid graph TD; mds-accordion-item --> mds-text mds-accordion-timer-item --> mds-text mds-badge --> mds-text mds-banner --> mds-text mds-benchmark-bar --> mds-text mds-bibliography --> mds-text mds-breadcrumb-item --> mds-text mds-button --> mds-text mds-chip --> mds-text mds-file --> mds-text mds-file-preview --> mds-text mds-filter --> mds-text mds-filter-item --> mds-text mds-img --> mds-text mds-input-date-range --> mds-text mds-input-field --> mds-text mds-input-range --> mds-text mds-input-switch --> mds-text mds-input-tip-item --> mds-text mds-input-upload --> mds-text mds-keyboard --> mds-text mds-keyboard-key --> mds-text mds-kpi-item --> mds-text mds-label --> mds-text mds-list-item --> mds-text mds-mention --> mds-text mds-notification --> mds-text mds-paginator-item --> mds-text mds-policy-ai --> mds-text mds-pref --> mds-text mds-pref-animation --> mds-text mds-pref-consumption --> mds-text mds-pref-contrast --> mds-text mds-pref-language --> mds-text mds-pref-theme --> mds-text mds-price-table-features --> mds-text mds-price-table-features-cell --> mds-text mds-price-table-list-item --> mds-text mds-push-notification-item --> mds-text mds-quote --> mds-text mds-radial-progress --> mds-text mds-status-bar --> mds-text mds-stepper-bar-item --> mds-text mds-tab-bar-item --> mds-text mds-table-header-cell --> mds-text mds-toast --> mds-text mds-tooltip --> mds-text mds-url-view --> mds-text style mds-text fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo) --- _Source: https://npm.io/package/@maggioli-design-system/mds-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._