CSS: text ​

.instui-text · stable — आकार, वज़न, रंग, और शैली मॉडिफ़ायर के साथ बॉडी-टेक्स्ट टाइपोग्राफी।

-variant-* प्रीसेट्स और -color-*/-size-*/-weight-* मॉडिफ़ायर सभी एक ही तत्व पर संयोजित होते हैं; heading की तरह नहीं, यह कोई निहित सामरिक स्तर प्रदर्शित नहीं करता।

Source: text.css

उपयोग ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/text.css";

उदाहरण ​

html
<span class="instui-text -size-xs --display-block">x-small text</span>
<span class="instui-text -size-sm --display-block">small text</span>
<span class="instui-text -variant-content-quote --display-block">Quoted text</span>
<span class="instui-text -color-ai-highlight">AI highlight text</span>

मॉडिफायर ​

मॉडिफायरविवरण
.-color-aiअप्रमाणित — use .-color-ai-highlight.
.-color-ai-highlightबैकग्राउंड हाइलाइट के साथ AI-एक्सेंट टेक्स्ट रंग।
.-color-brandब्रैंड टेक्स्ट रंग।
.-color-dangerडेंजर (खतरा) टेक्स्ट रंग।
.-color-primaryप्राइमरी टेक्स्ट रंग।
.-color-primary-inverseडार्क पृष्ठभूमि पर (प्राइमरी इनवर्स) टेक्स्ट रंग।
.-color-primary-onरंगीन पृष्ठभूमि पर प्राइमरी टेक्स्ट रंग।
.-color-secondaryसेकंडरी (म्यूट) टेक्स्ट रंग।
.-color-secondary-inverseडार्क पृष्ठभूमि पर (सेकंडरी इनवर्स) टेक्स्ट रंग।
.-color-secondary-onरंगीन पृष्ठभूमि पर सेकंडरी टेक्स्ट रंग।
.-color-successसक्सेस (सफलता) टेक्स्ट रंग।
.-color-warningवॉर्निंग (चेतावनी) टेक्स्ट रंग।
.-size-largeबड़ा। -size-lg का लंबा-फॉर्म उपनाम।
.-size-lgबड़ा।
.-size-smछोटा।
.-size-smallछोटा। -size-sm का लंबा-फॉर्म उपनाम।
.-size-x-largeअतिरिक्‍त बड़ा। -size-xl का लंबा-फॉर्म उपनाम।
.-size-x-smallअतिरिक्‍त छोटा। -size-xs का लंबा-फॉर्म उपनाम।
.-size-xlअतिरिक्‍त बड़ा।
.-size-xsअतिरिक्‍त छोटा।
.-style-italicइटैलिक।
.-transform-capitalizeप्रत्येक शब्द का पहला अक्षर बड़ा करें।
.-transform-lowercaseटेक्स्ट को लोअरकेस (निम्नाक्षर) करें।
.-transform-uppercaseटेक्स्ट को अपरकेस (महानाक्षर) करें।
.-variant-contentकंटेंट-टाइप प्रीसेट।
.-variant-content-importantमहत्वपूर्ण-कंटेंट टाइप प्रीसेट।
.-variant-content-quoteकोट-कंटेंट टाइप प्रीसेट।
.-variant-content-smallछोटी-कंटेंट टाइप प्रीसेट।
.-variant-description-pageपेज-डिस्क्रिप्शन टाइप प्रीसेट।
.-variant-description-sectionसेक्शन-डिस्क्रिप्शन टाइप प्रीसेट।
.-variant-legendलिजेंड टाइप प्रीसेट।
.-weight-boldबोल्ड वज़न।

उपयोग किये गए टोकन ​

Tokenप्रकारमान
--instui-color-institutional-brand-font-color-dark<color>LightDarklight-dark(#273540, #ffffff)
--instui-color-institutional-brand-primary<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-text-ai-background-color<color>LightDarklight-dark(#F3E5F7, #6D3984)
--instui-component-text-ai-color<color>LightDarklight-dark(#8A49A7, #F3E5F7)
--instui-component-text-base-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-text-base-on-color<color>#ffffff
--instui-component-text-content-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-text-content-font-size<length>1rem
--instui-component-text-content-font-weight<integer>400
--instui-component-text-content-important-font-size<length>1rem
--instui-component-text-content-important-font-weight<integer>600
--instui-component-text-content-important-line-height<percentage>150%
--instui-component-text-content-line-height<percentage>150%
--instui-component-text-content-quote-font-size<length>1rem
--instui-component-text-content-quote-font-style—italic
--instui-component-text-content-quote-font-weight<integer>500
--instui-component-text-content-quote-line-height<percentage>150%
--instui-component-text-content-small-font-size<length>0.875rem
--instui-component-text-content-small-font-weight<integer>400
--instui-component-text-content-small-line-height<percentage>150%
--instui-component-text-description-page-font-size<length>1.25rem
--instui-component-text-description-page-font-weight<integer>400
--instui-component-text-description-page-line-height<percentage>150%
--instui-component-text-description-section-font-size<length>1rem
--instui-component-text-description-section-font-weight<integer>400
--instui-component-text-description-section-line-height<percentage>150%
--instui-component-text-error-color<color>LightDarklight-dark(#CF1F24, #FA917F)
--instui-component-text-font-size-large<length>1.75rem
--instui-component-text-font-size-medium<length>1rem
--instui-component-text-font-size-small<length>0.875rem
--instui-component-text-font-size-x-large<length>2.5rem
--instui-component-text-font-size-x-small<length>0.75rem
--instui-component-text-font-weight-bold<integer>600
--instui-component-text-font-weight-normal<integer>400
--instui-component-text-inverse-color<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-text-legend-font-size<length>0.75rem
--instui-component-text-legend-font-weight<integer>400
--instui-component-text-legend-line-height<percentage>150%
--instui-component-text-muted-color<color>LightDarklight-dark(#576773, #AAB0B5)
--instui-component-text-muted-on-color<color>#ffffff
--instui-component-text-primary-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-text-success-color<color>LightDarklight-dark(#037D37, #61C378)
--instui-component-text-warning-color<color>LightDarklight-dark(#BB4200, #FF905A)

संबंधित ​

  • heading — हेडिंग्स के लिए टाइपोग्राफी, बॉडी टेक्स्ट के बजाय।
  • truncate — इस टेक्स्ट को एक पंक्ति या निर्दिष्ट पंक्तियों की संख्या तक काट देता है।