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 — แบบอักษรเนื้อหาสำหรับข้อความที่ไม่ใช่หัวเรื่อง.