Heading Styles
Applies consistent heading styles for h1–h6 elements. This includes font sizes, line heights, bottom margins, and bold weight to create a clear typographic hierarchy for headings in your UI.
Usage
Signature:
scss
@mixin use-heading();Example:
scss
@include termeh.use-heading();Module:
This module is registered as heading in the presented modules.
Dependencies
Heading module uses the following Termeh global var():
| Component | Type | Usage | Default |
|---|---|---|---|
line-height → large | Number | Line height for <h1> and <h2> | 1.2em |
line-height → medium | Number | Line height for <h3> and <h4> | 1.4em |
line-height → normal | Number | Line height for <h5> and <h6> | 1.6em |
gap → macro | Number | Bottom margin for headings | 1.6em |
Heading module uses the following Termeh size():
| Size | Usage | Default |
|---|---|---|
massive | Font size for <h1> | error |
huge | Font size for <h2> | error |
big | Font size for <h3> | error |
large | Font size for <h4> | error |
medium | Font size for <h5> | error |
normal | Font size for <h6> | error |