elevation
Table of Contents
Kempo UI follows the kempo-css elevation system.
Elevation defines a component's position in the stacking order using a simple formula:
z-index = level × 10
There are 11 levels (0–10). Level 2 is the page default for normal document flow — most components do not need a
z-index at all. Fixed-position components that must appear above or below other layers each occupy a
dedicated level, with intentional gaps between them so user-defined elements (like a site navbar) always have a
clear, unambiguous home.
kempo-css provides three companion utilities that work alongside a component's elevation level:
elevation-N — sets z-index: N * 10shadow — adds a depth shadow matching the elevationbg-elevation — adjusts the background color to the matching elevation tint
| Level |
z-index |
Intended use |
| 0 | 0 | Behind the page — sunken or background elements |
| 1 | 10 | Buffer zone — reserved for customization |
| 2 | 20 | Page default — normal document flow |
| 3 | 30 | Fixed panels that sit below a navbar (push drawers, dropdowns) |
| 4 | 40 | Buffer zone — reserved for customization |
| 5 | 50 | Fixed navbar (user-defined) |
| 6 | 60 | Overlay drawers — above a fixed navbar |
| 7 | 70 | Buffer zone — reserved for customization |
| 8 | 80 | Full-screen modals and lightboxes |
| 9 | 90 | Notification toasts |
| 10 | 100 | Reserved — use only when absolutely necessary |
Every Kempo UI component that uses position: fixed is assigned an elevation level:
The Aside component uses two different levels depending on its main attribute.
When main="push", it shifts the page layout and should sit below your site navbar (level 3).
When main="overlay", it floats over the page and needs to appear above the navbar (level 6).
To override a component's elevation, target its host element with a CSS custom property or a direct
z-index rule. For example, to raise the Toast to the very top:
k-toast {
z-index: 100;
}
Levels 1 and 4 are intentionally empty buffer zones. Use them for custom fixed elements (e.g. a cookie banner at
level 4, or a persistent sticky bar at level 1) that need a guaranteed home relative to Kempo UI components.
Apply elevation classes from kempo-css directly to custom elements when you want them to participate in the same
system without writing raw z-index values:
<div class="elevation-5 shadow bg-elevation">My fixed navbar</div>
Kempo UI