Footer
Page footer with start, center, and end sections. Supports sticky/fixed positioning and border/shadow variants.
Default
Base
| Class | Description |
|---|---|
.ui-footer | Base class |
Sticky
| Class | Description |
|---|---|
.ui-footer--sticky | sticky |
Fixed
| Class | Description |
|---|---|
.ui-footer--fixed | fixed |
Bordered
| Class | Description |
|---|---|
.ui-footer--bordered | bordered |
Raised
| Class | Description |
|---|---|
.ui-footer--raised | raised |
Override these CSS custom properties to customize the component.
| Token | Default | Description |
|---|---|---|
--ui-footer-height |
var(--ui-row-3) |
Overall height |
--ui-footer-bg |
var(--ui-color-bg) |
Background color |
--ui-footer-padding-inline |
var(--ui-space-3) |
Horizontal padding |
--ui-footer-border-color |
var(--ui-color-border) |
Border color |
--ui-footer-z |
var(--ui-z-index-sticky) |
Z-index stacking order |
Sticky
<!-- Stays at the bottom of the viewport on scroll. -->
<footer class="ui-footer ui-footer--sticky ui-footer--bordered">
<div class="ui-footer__start"><small>Brand</small></div>
<div class="ui-footer__center">Links</div>
<div class="ui-footer__end"><small>v1.0.0</small></div>
</footer>Bordered
<!-- Top border via inset box-shadow to preserve grid rhythm. -->
<footer class="ui-footer ui-footer--bordered">
<div class="ui-footer__start">
<small>Bordered footer</small>
</div>
<div class="ui-footer__end">
<small>v1.0.0</small>
</div>
</footer>Raised
<!-- Subtle drop shadow above the footer. -->
<footer class="ui-footer ui-footer--raised">
<div class="ui-footer__start">
<small>Raised footer</small>
</div>
<div class="ui-footer__end">
<small>v1.0.0</small>
</div>
</footer>Fixed
<!-- Fixed to viewport bottom, always visible. -->
<footer class="ui-footer ui-footer--fixed ui-footer--bordered">
<div class="ui-footer__start"><small>Brand</small></div>
<div class="ui-footer__end"><small>v1.0.0</small></div>
</footer>Full Layout
App
Content
<!-- Footer inside an app-shell with topbar and sidebar. -->
<body class="ui-app-shell">
<header class="ui-topbar ui-topbar--bordered">
<div class="ui-topbar__start"><strong>App</strong></div>
</header>
<main class="ui-main ui-main--full">
<div class="ui-container">Content</div>
<footer class="ui-footer ui-footer--bordered">
<div class="ui-footer__start"><small>Brand</small></div>
<div class="ui-footer__end"><small>v1.0.0</small></div>
</footer>
</main>
</body>