Docs

Docs

Lumo Elevation

Listing of Lumo elevation style properties, the visual stacking of elements in a UI.

Elevation is used to signify elements which are stacked on top of other elements in the UI. This page lists Lumo elevation-related style properties, which you can use to create visually consistent elevation styles.

Lumo includes different levels of elevation that are applied using box-shadow.

Description CSS Custom Property

Extra Large
Elements highest in the stacking order, for example notifications, which should be above all other content.

--lumo-box-shadow-xl:

Large
Elements that rise above most elements in the UI, for example dialogs.

--lumo-box-shadow-l:

Medium
Contextual overlays, for components such as Select and Menu Bar.

--lumo-box-shadow-m:

Small
Tooltips, etc.

--lumo-box-shadow-s:

Extra Small
Elements closest to the application background, for example cards.

--lumo-box-shadow-xs:

F3F9FE20-3BA3-4A6C-A559-DD8C7DD91E13