Surfaces & Elevation
Overview
Surfaces encapsulate parts of the UI. At the base there are two of them: the backdrop surface is the background of the application, the elevated surface groups content in tiles, menus, overlays, dialogs and everything that needs to be above the background.
backdrop-surfaceThe page itselfelevated-surfaceA tile on the pageElevation
Elevated surfaces come in four elevations. The higher the elevation, the stronger the shadow and the more temporary the surface. Elevation tells people what lies above what — and what disappears again.
shadow-elevation-0shadow-elevation-1shadow-elevation-2shadow-elevation-3| Elevation | Used by | Means |
|---|---|---|
| 0 | Flat areas, e.g. a tile within a tile, sections of a sheet | Part of the surface below, no separation |
| 1 | Tiles, page header, side menu | Permanent content above the backdrop |
| 2 | Context menus, tooltips, toolbar, snackbars, dragged items | Temporary, anchored to an element, closes easily |
| 3 | Modals, sheets, popovers, command menu, account menu | Overlays above everything, often with a blanket |
Alternate surface
Elevation 0 can use the elevated-surface-alternate background to set an area apart without a shadow, e.g. the code area of examples in this documentation.
elevated-surface-alternateSemantics
A surface can only influence its own content and the surfaces nested in it: a button in a tile acts on that tile. Exceptions are surfaces that are clearly subordinate to another, like menus and dialogs opened from it, or surfaces connected by lines, like the nodes of a graph.
Using surfaces
Use the classes of fusion-css, or the elevation prop of Tile.
<div className="elevated-surface shadow-elevation-2">…</div><Tile elevation={0}>…</Tile>
@use "@brynlabs/fusion-css/index" as fusioncss;.menu {background: fusioncss.get-color("elevated-surface");box-shadow: var(--shadow--elevation-2);}