Footer
The Footer component provides a reusable pattern for footer in the interface.
Footer
Renders a footer in default mode with a logotype and grouped navigation links.
Footer with three columns and subfooter
Renders a slot-only footer with a three-column content area and a horizontal subfooter link list, using lorem ipsum placeholder content.
Footer with slot content
Renders the footer in slot-only mode, where arbitrary content is placed inside the component tags instead of using the built-in links structure.
Footer with subfooter
Renders the footer with a subfooter bar containing a list of contact items, demonstrating the subfooter section with horizontal layout.
Footer with prefooter and postfooter
Renders the footer in slot-only mode with prefooter content placed above and postfooter content placed below the main slot area.
API
| Parameter | Default | Description |
|---|---|---|
|
componentElement
|
footer | - |
|
slotOnly
|
false | - |
|
id
|
null | - |
|
logotype
|
/ | - |
|
logotypeHref
|
- | |
|
links
|
[] | - |
|
subfooterLogotype
|
- | |
|
subfooter
|
null | - |
|
prefooter
|
null | - |
|
postfooter
|
null | - |
|
footerareas
|
null | - |
CSS API
| Variable | Default | Type | Values | Description |
|---|---|---|---|---|
|
--c-footer--base
|
var(--base) | range | - | Main unit that drives radius and spacing scales. |
|
--c-footer--space
|
var(--space) | range | - | Base spacing unit. Used for padding and margin inside components. |
|
--c-footer--outer-space
|
var(--outer-space) | range | - | Spacing between components. Use --space for spacing inside components. |
|
--c-footer--border-width
|
var(--border-width) | range | - | Size |
|
--c-footer--color--surface
|
var(--color--surface) | color | - | Controls the footer background, text contrast, border color, and alternate subfooter background. |
|
--c-footer--color--surface-contrast
|
var(--color--surface-contrast) | color | - | Used for text and icons on surface backgrounds with less contrast. |
|
--c-footer--color--surface-border
|
var(--color--surface-border) | color | - | Manual companion token for borders on surface elements. |
|
--c-footer--color--surface-alt
|
var(--color--surface-alt) | color | - | Manual companion token for subtle surface backgrounds. |
|
--c-footer--color--surface-contrast-muted
|
var(--color--surface-contrast-muted) | color | - | Derived muted contrast for text and icons on surface backgrounds. |
|
--c-footer--color--primary
|
var(--color--primary) | color | - | Primary |
|
--c-footer--color--primary-contrast
|
var(--color--primary-contrast) | color | - | Primary Contrast |
|
--c-footer--color--primary-border
|
var(--color--primary-border) | color | - | Manual companion token for primary border and hover states. |
|
--c-footer--color--primary-alt
|
var(--color--primary-alt) | color | - | Manual companion token for subtle primary surfaces. |
|
--c-footer--color--secondary
|
var(--color--secondary) | color | - | Secondary |
|
--c-footer--color--secondary-contrast
|
var(--color--secondary-contrast) | color | - | Secondary Contrast |
|
--c-footer--color--secondary-border
|
var(--color--secondary-border) | color | - | Manual companion token for secondary border and hover states. |
|
--c-footer--color--secondary-alt
|
var(--color--secondary-alt) | color | - | Manual companion token for subtle secondary surfaces. |
|
--c-footer--color--background
|
var(--color--background) | color | - | Background |
|
--c-footer--color--background-contrast
|
var(--color--background-contrast) | color | - | Used for text and icons on background with less contrast. |
|
--c-footer--color--background-border
|
var(--color--background-border) | color | - | Manual companion token for borders on background surfaces. |
|
--c-footer--color--background-alt
|
var(--color--background-alt) | color | - | Manual companion token for subtle background surfaces. |
|
--c-footer--color--background-contrast-muted
|
var(--color--background-contrast-muted) | color | - | Derived muted contrast for text and icons on background surfaces. |
|
--c-footer--font-size-90
|
var(--font-size-90) | range | - | One step below base in the type scale. |
|
--c-footer--font-size-200
|
var(--font-size-200) | range | - | One step above base in the type scale. Equivalent to h6/subtitle. |
|
--c-footer--font-size-300
|
var(--font-size-300) | range | - | Two steps above base in the type scale. Equivalent to h5. |
|
--c-footer--logotype-height-multiplier
|
6 | range | - | Scales the main footer logotype height locally without changing the global base size. |
|
--c-footer--subfooter-logotype-height-multiplier
|
6 | range | - | Scales the subfooter logotype height locally without changing the global base size. |
|
--c-footer--outer-padding-inset-multiplier
|
1 | range | - | Scales footer outer padding. |
|
--c-footer--gap-multiplier
|
1 | range | - | Scales footer gaps. |
|
--c-footer--subfooter-border-width
|
0 | select | 0, var(--c-footer--subfooter-border-width-token) | Toggles the subfooter top border between no border and the component border width token. |
|
--c-footer--subfooter-backdrop-filter
|
none | select | none, blur(2px) | Toggles backdrop blur behind the subfooter. |
|
--c-footer--columns-count
|
3 | select | 1, 2, 3, 4 | How many columns to display in the footer. |
|
--c-footer--logotype-justify-content
|
flex-start | select | flex-start, center, flex-end | How to align the footer logotype. |
|
--c-footer--text-align
|
left | select | left, center, right | How to align text in the footer columns. |
|
--c-footer--prefooter-text-align
|
left | select | left, center, right | How to align text in the prefooter. |
|
--c-footer--subfooter-alignment
|
center | select | flex-start, center, flex-end, space-between, space-around, space-evenly | How to distribute the subfooter logo and links group. |
|
--c-footer--subfooter-flex-direction
|
row | select | row, row-reverse | Controls whether the subfooter wrapper displays the logo before or after the links. |
|
--c-footer--background-opacity
|
1 | range | - | Controls the opacity of the footer background image layer. |
|
--c-footer--subfooter-background-opacity
|
100 | range | - | Controls the opacity of the subfooter background layer. |
|
--c-footer--background-rotation
|
0 | range | - | Rotates the footer background image. |
|
--c-footer--background-position
|
center | select | left top, center top, right top, center, right bottom, center bottom, left bottom | Controls the CSS background-position value. |
|
--c-footer--background-repeat
|
no-repeat | select | no-repeat, repeat, repeat-x, repeat-y | Controls the CSS background-repeat value. |
|
--c-footer--background-size
|
cover | select | cover, contain, auto | Controls the CSS background-size value. |
|
--c-footer--background-blend-mode
|
normal | select | normal, overlay | Controls the CSS background-blend-mode. |