Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

Lumo Elevation

Elevation is used to signify elements which are stacked on top of other elements in the UI. This page lists Lumo elevation-related CSS Custom 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