Foundation component · Content

Surface

A semantic hierarchy for embedded, grouped, and temporary product content.

Live playground

Panel title

Use this region for product content assembled from existing components.

Choose the surface by relationship

Use Embedded for in-flow content and Panel for related settings or content.
Reserve Overlay for temporary floating UI such as menus and popovers.

Accessibility

Choose the rendered element and accessible name for the content it groups.

Implementation

Surface owns visual hierarchy only and accepts a custom element through render.

import { Surface } from "@lenso/ui/surface";

<Surface level="panel">
  <h2>Panel title</h2>
  <p>Compose product content from existing components.</p>
</Surface>;