CSS: heading ​

.instui-heading — טיפוגרפיית כותרת מ־-level-h1 עד -level-h6.

ההגדרות המוקדמות של -variant-* עוקפות את גודל-הגופן ומשקל-הגופן של -level-*, לכן יש לשלב רק אחד מכל משפחה בכל אלמנט.

Source: heading.css

נגישות ​

מחלקות אלה מגדירות רק את הרמה הוויזואלית, לכן יש להציג תגית <h1>–<h6> ממשית (או להשתמש ב־role="heading" עם aria-level) כדי להעביר את רמת הכותרת.

שימוש ​

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-aiצבע הדגשת AI.
.-color-primary(ברירת מחדל) צבע ראשי.
.-color-primary-inverseצבע על־כהה (הפוך ראשי).
.-color-secondaryצבע משני (מרוכך).
.-level-h1להציג בקנה מידה טיפוגרפי h1.
.-level-h2להציג בקנה מידה טיפוגרפי h2.
.-level-h3להציג בקנה מידה טיפוגרפי h3.
.-level-h4להציג בקנה מידה טיפוגרפי h4.
.-level-h5להציג בקנה מידה טיפוגרפי h5.
.-level-h6להציג בקנה מידה טיפוגרפי h6.
.-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 — טיפוגרפיית גוף עבור טקסט שאינו כותרת.