Layout

Surface

Semantic Material surface with controlled treatment, shape, and HTML root.

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Semantic surface

Properties

Variant

Shape

Tag

Vue

<m-surface
  :style='{&quot;minWidth&quot;:&quot;280px&quot;,&quot;padding&quot;:&quot;32px&quot;}'
  variant="filled"
  shape="large"
  tag="section"
>
  Semantic surface
</m-surface>

MSurface API

Props, slots, and events are extracted from the current public UI Kit contract.

MSurface

Layout family

src/runtime/components/ui/surface

Props

NameTypeDefault

tagRoot element tag. Consumer picks semantic tags (`section`, `aside`, …).

string'div'

variantMD3 surface preset.

'plain' | 'filled' | 'elevated' | 'outlined''plain'

shapeMD3 system corner shape token.

'none'
    | 'extra-small'
    | 'small'
    | 'medium'
    | 'large'
    | 'extra-large'
    | 'extra-large-top'
    | 'full'

'none'

Slots

Events

MSurface does not emit component-specific events. Native events fall through to its root element.