Layout

Surface

Neutral background primitive that establishes a tonal layer for nested content and broadcasts its tone to descendants via context.

import { Surface } from '@lostgradient/cinder/surface';

layoutcontainer

Overview

A themed container that publishes its tone to descendant components through Svelte context.

<script lang="ts">
  import Surface from '@lostgradient/cinder/surface';
</script>

<Surface>Content</Surface>

Live preview

Use when

Wrapping a region in a consistent background tone such as default, raised, or sunken.
Letting nested components adapt their styling based on the surrounding surface tone.

Avoid when

Building a self-contained content card with padding and elevation — use card instead.
Standing up a full page scaffold with header and actions — use a hand-rolled page scaffold instead.

Tone variants for framed interface regions.

Props for surface
Name	Type	Default	Required	Bindable	Description
`tone`	`'default' \| 'raised' \| 'inset' \| 'transparent'`	`'default'`
`children`	`snippet`				Content rendered inside the surface container.

Full

Featured example

Shows the featured example. Adjust the controls to update the snippet.

<Surface>Surface</Surface>

Props

tone

children

Content rendered inside the surface container.