Surface

Creates semantic background hierarchy without prescribing content layout.

A quiet container for related content.

Elevation is reserved for content that needs separation.

Astro

---
import { Surface } from '@charvesta/cetha';
---

<Surface as="section" level="raised" bordered>
  Surface content
</Surface>

API reference

Prop	Type	Default	Description
`as`	`'div' \| 'section' \| 'article' \| 'aside'`	`'div'`	Rendered HTML element.
`level`	`'base' \| 'surface' \| 'raised'`	`'surface'`	Background elevation.
`bordered`	`boolean`	`false`	Adds a subtle border.
`class`	`string`	—	Additional classes forwarded to the rendered element.

Choose the semantic element based on document structure, not appearance.