@maggioli-design-system/mds-text

mds-text

This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.

Properties

Property	Attribute	Description	Type	Default
tag	tag	Specifies the HTML tag of the element	TypographyTagType | undefined	undefined
truncate	truncate	Specifies if the text shoud be truncated or should behave as a normal text	boolean | 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-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-timer-item
• mds-avatar
• mds-badge
• mds-banner
• mds-benchmark-bar
• mds-bibliography
• mds-breadcrumb-item
• mds-button
• mds-chip
• mds-file
• mds-filter
• mds-filter-item
• mds-input
• mds-input-field
• mds-input-range
• mds-input-switch
• mds-kpi-item
• mds-label
• mds-list-item
• mds-notification
• mds-paginator-item
• mds-price-table-features
• mds-price-table-features-cell
• mds-price-table-list-item
• mds-quote
• mds-stepper-bar-item
• mds-tab-bar-item
• mds-toast
• mds-tooltip
• mds-url-view
• mds-usage

Graph

graph TD;
  mds-accordion-item --> mds-text
  mds-accordion-timer-item --> mds-text
  mds-avatar --> 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-filter --> mds-text
  mds-filter-item --> mds-text
  mds-input --> mds-text
  mds-input-field --> mds-text
  mds-input-range --> mds-text
  mds-input-switch --> mds-text
  mds-kpi-item --> mds-text
  mds-label --> mds-text
  mds-list-item --> mds-text
  mds-notification --> mds-text
  mds-paginator-item --> mds-text
  mds-price-table-features --> mds-text
  mds-price-table-features-cell --> mds-text
  mds-price-table-list-item --> mds-text
  mds-quote --> mds-text
  mds-stepper-bar-item --> mds-text
  mds-tab-bar-item --> mds-text
  mds-toast --> mds-text
  mds-tooltip --> mds-text
  mds-url-view --> mds-text
  mds-usage --> mds-text
  style mds-text fill:#f9f,stroke:#333,stroke-width:4px

---

Built with love @ Gruppo Maggioli from R&D Department