Components

Surface

Low-level background container. Use this when you need a generic surface — for content cards, prefer the richer Card component.

Elevation

flat

raised

hover

overlay

inverse

tsx

<Surface elevation="flat" />
<Surface elevation="raised" />
<Surface elevation="hover" />
<Surface elevation="overlay" />
<Surface elevation="inverse" />

Composing

Combine elevation, radius and border to build any container shape — sidebars, drawers, overlay menus, callouts.