Elevation

Elevation allows elements to be lifted from the background. It can be defined by applying drop shadows or other visual cues, such as color and borders.

Elevation using shadows

Reflects a spatial relationship by indicating separation from the background or allowing content to be scrolled under another element. Elevation using shadows includes two levels: floating and raised.

Floating

Default elevation level that elevates messages temporarily appearing in front of other surfaces, such as modals and banners. Available through the borderStyle prop in Box. For dark mode, we use the elevationFloating background of Box instead of a shadow.

$elevation-floating
Light mode
10% (#000000) opacity / Blur: 8
Dark mode
Roboflow 700 / Shadows: none
When to use
  • Highlighting an item that floats above other content, such as temporary messages or cards
  • With IconButton and other elements, serving as an affordance for floating actions
When not to use
  • Elevating content that doesn't need elevation or content that has its own setup already (e.g. Pins, boards)

Raised

Presents a drop shadow on the edge of a top or bottom component, allowing surfaces to move behind when scrolled. Available through the borderStyle prop in Box. In dark mode, the raised border should be paired with the elevationRaised background color.

Raised-top $elevation-raised-top
Light mode
12% (#000000) opacity / Y: 2 / Blur: 8
Dark mode
Top: Roboflow 600 / Y: 0.5 / Blur: 0
Raised-bottom $elevation-raised-bottom
Light mode
12% (#000000) opacity / Y: -2 / Blur: 8
Dark mode
Top: Roboflow 600 / Y: -0.5 / Blur: 0
When to use
  • Indicating a sticky UI element where content can scroll underneath (e.g., header, footer, navigation bar)
When not to use
  • Elevating temporary messages (e.g. modals, banners)

Elevation using color

Use as needed to accent containers when shadows are not an option. Available with color="elevationAccent" in Box.

$color-background-elevation-accent
Light mode
Roboflow 100 / Shadows: none
Dark mode
Roboflow 800 / Shadows: none
When to use
  • As needed to highlight larger containers when shadows don't work (e.g. cards)
When not to use
  • Elevating temporary messages (e.g. modals, banners)
  • Raising elements fixed on the top or bottom of the screen. Use "Raised" elevation instead

Elevation using borders

Technically, borders are not considered elevation; however, they can be used as an alternative to display a single contained group when shadows or color don't work. The border treatment helps to determine visible boundaries. Available through the borderStyle prop in Box.

$color-border-container
Light mode
Border-color: Roboflow 300
Dark mode
Border-color: Roboflow 600
When to use
  • Delineating a larger container to set visible boundaries when shadows or color don't work. (e.g. card)
When not to use
  • Elevating temporary messages (e.g. modals, banners)
  • Raising elements fixed on the top or bottom of the screen. Use "Raised" elevation instead
Edit page on GitHub