Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

Elevation

Elevation is used to indicate elements which are stacked on top of other elements in the UI. Use these CSS Custom Properties to create visually consistent elevation styles.

Note
Only available in Lumo
This documentation applies only to the Lumo theme.
Open in a
new tab
// Import all Lumo CSS custom properties into the global style scope
import '@vaadin/vaadin-lumo-styles/color';
import '@vaadin/vaadin-lumo-styles/typography';
import '@vaadin/vaadin-lumo-styles/sizing';
import '@vaadin/vaadin-lumo-styles/spacing';
import '@vaadin/vaadin-lumo-styles/style';
// prettier-ignore

Box Shadow

Different levels of elevation 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:

67A445FA-D374-4209-BEDB-ABAECCA5A916