Header Module
The Header module provides flexible heading layouts with optional thumbnails, sub-headers, decorators, and color or gap variants. Heading item (h1-h6) extends the Element module.
Signature:
scss
@mixin use-header($colors: (), $gaps: ());Example:
scss
@include termeh.use-header(("primary", "indigo"), ("normal", "large"));Module:
This module is registered as header in the presented modules.
Dependencies
Header module uses the following Termeh global var():
| Component | Type | Usage | Default |
|---|---|---|---|
font → weight | String | Sub-header font weight | normal |
strong → weight | String | Top-header font weight | bold |
gap → macro | Number | Spacing between blocks and bottom margin | 1.6em |
line-height → normal | Number | Default line height | 1.6em |
decorator → size | Number | Decorator line thickness | 2px |
Header module uses the following Termeh color() and variant():
| Color / Variant | Usage | Default |
|---|---|---|
shade | Default decorator color | error |
shade → mute | Sub-header text color | null |
Child Elements
.thumbnail→ heading icon or avatar.headers→ heading items container
Modifiers
.is-decorated→ adds a side border decoration.is-centered→ centers all text within the header.is-<gap>-gap→ applies a predefined spacing value.is-<color>→ applies a predefined accent color