CSS: heading

.instui-heading — Phông chữ tiêu đề từ -level-h1 đến -level-h6.

Các preset -variant-* ghi đè kích thước chữ và độ đậm của -level-*, vì vậy chỉ kết hợp một giá trị của mỗi họ phông cho mỗi phần tử.

Source: heading.css

Khả năng truy cập

Các lớp này chỉ đặt mức hiển thị về mặt trực quan, nên kết xuất một <h1>–<h6> thực sự (hoặc dùng role="heading" với aria-level) để truyền đạt cấp độ tiêu đề.

Sử dụng

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

Các ví dụ

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

Bộ sửa

Bộ sửa	Mô tả
.-border-bottom	Thêm một đường kẻ dưới.
.-border-top	Thêm một đường kẻ trên.
.-color-ai	Màu nhấn AI.
.-color-primary	(mặc định) Màu chính.
.-color-primary-inverse	Màu trên nền tối (màu chính đảo).
.-color-secondary	Màu phụ (trầm).
.-level-h1	Hiển thị theo tỷ lệ kiểu h1.
.-level-h2	Hiển thị theo tỷ lệ kiểu h2.
.-level-h3	Hiển thị theo tỷ lệ kiểu h3.
.-level-h4	Hiển thị theo tỷ lệ kiểu h4.
.-level-h5	Hiển thị theo tỷ lệ kiểu h5.
.-level-h6	Hiển thị theo tỷ lệ kiểu h6.
.-variant-label	Preset kiểu nhãn.
.-variant-title-card-mini	Preset tiêu đề thẻ nhỏ.
.-variant-title-card-regular	Preset tiêu đề thẻ thường.
.-variant-title-card-section	Preset tiêu đề phần thẻ.
.-variant-title-page	Preset tiêu đề trang.
.-variant-title-section	Preset tiêu đề mục.

Token tiêu thụ

Token	Kiểu	Giá trị
--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

Liên quan

• text — Kiểu chữ thân bài cho văn bản không phải tiêu đề.