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.

$elevation-floating
10% (#000000) opacity / Blur: 8
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.

⚠️ Note: Raised shadow options will be available automatically in Box soon.

Raised-top
$elevation-raised-top
12% (#000000) opacity / Y: -2 / Blur: 8
Raised-bottom
$elevation-raised-bottom
12% (#000000) opacity / Y: 2 / Blur: 8
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
Roboflow 100 / Shadows: none
When to use
  • As needed to highlight 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
Border-color: Roboflow 300 / 1px (inside) / Shadows: none
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