Header
The Header component provides a reusable pattern for header in the interface.
Basic
Primary color
Secondary color
Accented
Primary color accented
Secondary color accented
With logotype (auto-scale on)
Header with a logotype. Logotype auto-scale is enabled by default - resize the browser to see the logotype scale fluidly between its minimum and maximum height.
With logotype (auto-scale off)
Same header with the logotype auto-scale disabled. The logotype height is fixed regardless of screen or container size.
With brand
Header using the brand component instead of logotype while keeping the rest of the header layout unchanged.
With brand and text
Header using the brand component with accompanying text. The text is aligned to the right of the brand component and will wrap if necessary.
With brand and multiline text
Header using the brand component with accompanying text. The text is aligned to the right of the brand component and will wrap if necessary.
No margin (x and y disabled)
Header with both horizontal and vertical margins disabled via --padding-x-enabled and --padding-y-enabled set to 0.
API
| Parameter | Default | Description |
|---|---|---|
|
componentElement
|
header | - |
|
id
|
null | - |
|
textColor
|
false | - |
|
backgroundColor
|
false | - |
|
sticky
|
false | - |
CSS API
| Variable | Default | Type | Values | Description |
|---|---|---|---|---|
|
--c-header--space
|
var(--space) | range | - | Base spacing unit. Used for padding and margin inside components. |
|
--c-header--outer-space
|
var(--outer-space) | range | - | Spacing between components. Use --space for spacing inside components. |
|
--c-header--color--surface
|
var(--color--surface) | color | - | Controls the header background, text contrast, and border color. |
|
--c-header--color--surface-contrast
|
var(--color--surface-contrast) | color | - | Used for text and icons on surface backgrounds with less contrast. |
|
--c-header--color--primary
|
var(--color--primary) | color | - | Primary |
|
--c-header--color--primary-contrast
|
var(--color--primary-contrast) | color | - | Primary Contrast |
|
--c-header--color--primary-border
|
var(--color--primary-border) | color | - | Manual companion token for primary border and hover states. |
|
--c-header--color--secondary
|
var(--color--secondary) | color | - | Secondary |
|
--c-header--color--secondary-contrast
|
var(--color--secondary-contrast) | color | - | Secondary Contrast |
|
--c-header--color--secondary-border
|
var(--color--secondary-border) | color | - | Manual companion token for secondary border and hover states. |
|
--c-header--base
|
var(--base) | range | - | Main unit that drives radius and spacing scales. |
|
--c-header--logotype-height-min-multiplier
|
5 | range | - | Minimum height multiplier (times base 8px) used for both logotype and brand. |
|
--c-header--brand-height-min-multiplier
|
5 | range | - | Minimum height multiplier (times base 8px) used for both logotype and brand. |
|
--c-header--logotype-height-max-multiplier
|
12 | minmaxrange | - | Maximum height multiplier (times base 8px) used for both logotype and brand. |
|
--c-header--brand-height-max-multiplier
|
12 | minmaxrange | - | Maximum height multiplier (times base 8px) used for both logotype and brand. |
|
--c-header--logotype-auto-scale-curve-factor
|
1 | select | 0.85, 1, 1.2 | Selects how quickly the logotype and brand scale with viewport width when auto scale is enabled. |
|
--c-header--brand-auto-scale-curve-factor
|
1 | select | 0.85, 1, 1.2 | Selects how quickly the logotype and brand scale with viewport width when auto scale is enabled. |
|
--c-header--logotype-auto-scale
|
1 | select | 0, 1 | Enables fluid scaling of the logotype or brand component based on available space or screen size. Uses a min/max/scale clamp calculation for smooth mobile adaptation. |
|
--c-header--brand-auto-scale
|
1 | select | 0, 1 | Enables fluid scaling of the logotype or brand component based on available space or screen size. Uses a min/max/scale clamp calculation for smooth mobile adaptation. |
|
--c-header--container-max-width
|
select | - | Controls the rendered width of header containers. | |
|
--c-header--inset-multiplier
|
1 | range | - | Scales the inner padding and gap of the header proportionally. |
|
--c-header--padding-x-enabled
|
1 | select | 0, 1 | Enables or disables horizontal (left and right) margin on the header. |
|
--c-header--padding-y-enabled
|
1 | select | 0, 1 | Enables or disables vertical (top and bottom) margin on the header. |