CSS: heading

.instui-heading — Τυπογραφία επικεφαλίδας από -level-h1 έως -level-h6.

Οι προεπιλογές -variant-* παρακάμπτουν το μέγεθος γραμματοσειράς και το βάρος γραμματοσειράς ενός -level-*, οπότε συνδυάστε μόνο μία από κάθε οικογένεια ανά στοιχείο.

Source: heading.css

Προσβασιμότητα

Αυτές οι κλάσεις ορίζουν μόνο το οπτικό επίπεδο, οπότε αποδώστε ένα πραγματικό <h1>–<h6> (ή χρησιμοποιήστε role="heading" με aria-level) για να μεταδοθεί το επίπεδο επικεφαλίδας.

Χρήση

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

Παραδείγματα

<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	Προεπιλογή τίτλου ενότητας.

Καταναλωμένα tokens

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 — Τυπογραφία σώματος για μη επικεφαλίδες.