CSS: heading ​

.instui-heading — हेडिंग टाइपोग्राफी -level-h1 से -level-h6 तक।

-variant-* प्रीसेट्स एक -level-* के font-size और font-weight को ओवरराइड करते हैं, इसलिए प्रति तत्व केवल एक ही परिवार का प्रत्येक प्रकार संयोजित करें।

Source: heading.css

एक्सेसिबिलिटी ​

ये क्लास केवल दृश्य स्तर सेट करते हैं, इसलिए हेडिंग स्तर व्यक्त करने के लिए वास्तविक <h1>–<h6> रेंडर करें (या aria-level के साथ role="heading" का उपयोग करें)।

उपयोग ​

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

उदाहरण ​

html
<div class="instui-heading -level-h1">Heading h1</div>

मॉडिफायर ​

मॉडिफायरविवरण
.-border-bottomनीचे एक नियम जोड़ें।
.-border-topऊपर एक नियम जोड़ें।
.-color-aiAI-एक्सेंट रंग।
.-color-primary(डिफ़ॉल्ट) प्रमुख रंग।
.-color-primary-inverseडार्क-पृष्ठभूमि पर (प्राइमरी इनवर्स) रंग।
.-color-secondaryसेकेंडरी (म्यूट) रंग।
.-level-h1h1 टाइप स्केल पर रेंडर करें।
.-level-h2h2 टाइप स्केल पर रेंडर करें।
.-level-h3h3 टाइप स्केल पर रेंडर करें।
.-level-h4h4 टाइप स्केल पर रेंडर करें।
.-level-h5h5 टाइप स्केल पर रेंडर करें।
.-level-h6h6 टाइप स्केल पर रेंडर करें।
.-variant-labelलेबल टाइप प्रीसेट।
.-variant-title-card-miniमिनी कार्ड-टाइटल प्रीसेट।
.-variant-title-card-regularनियमित कार्ड-टाइटल प्रीसेट।
.-variant-title-card-sectionकार्ड सेक्शन-टाइटल प्रीसेट।
.-variant-title-pageपृष्ठ-शीर्षक प्रीसेट।
.-variant-title-sectionसेक्शन-शीर्षक प्रीसेट।

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

Tokenप्रकारमान
--instui-component-heading-ai-text-bottom-gradient-color<color>LightDarklight-dark(#027887, #3CC0D4)
--instui-component-heading-ai-text-top-gradient-color<color>LightDarklight-dark(#944FB3, #CAA1D9)
--instui-component-heading-base-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-heading-border-color<color>LightDarklight-dark(#8D959F, #6A7883)
--instui-component-heading-border-padding<length>0.125rem
--instui-component-heading-border-width<length>0.0625rem
--instui-component-heading-h1-font-family[ <font-family-name> | <generic-font-family> ]#Inclusive Sans, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-heading-h1-font-size<length>2.5rem
--instui-component-heading-h1-font-weight<integer>700
--instui-component-heading-h2-font-size<length>1.75rem
--instui-component-heading-h2-font-weight<integer>600
--instui-component-heading-h3-font-size<length>1.25rem
--instui-component-heading-h3-font-weight<integer>700
--instui-component-heading-h4-font-size<length>1rem
--instui-component-heading-h4-font-weight<integer>700
--instui-component-heading-h5-font-size<length>0.875rem
--instui-component-heading-h5-font-weight<integer>600
--instui-component-heading-h6-font-size<length>0.75rem
--instui-component-heading-h6-font-weight<integer>600
--instui-component-heading-inverse-color<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-heading-label-font-size<length>1rem
--instui-component-heading-label-font-weight<integer>700
--instui-component-heading-line-height<percentage>125%
--instui-component-heading-muted-color<color>LightDarklight-dark(#576773, #AAB0B5)
--instui-component-heading-title-card-mini-font-size<length>1rem
--instui-component-heading-title-card-mini-font-weight<integer>700
--instui-component-heading-title-card-regular-font-size<length>1.25rem
--instui-component-heading-title-card-regular-font-weight<integer>700
--instui-component-heading-title-card-section-font-size<length>1.75rem
--instui-component-heading-title-card-section-font-weight<integer>700
--instui-component-heading-title-page-desktop-font-size<length>2.5rem
--instui-component-heading-title-page-desktop-font-weight<integer>700
--instui-component-heading-title-section-font-size<length>1.75rem
--instui-component-heading-title-section-font-weight<integer>700

संबंधित ​

  • text — नॉन-हेडिंग टेक्स्ट के लिए बॉडी टाइपोग्राफी।