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 — تایپوگرافی بدنه برای متن‌های غیرعنوانی.