Surface Reference
Consulte esta subpágina para ver import, available props, exemplo de uso e controles vivos do component.
Surface
Semantic visual container with typed variants for panels, notices and grouped content.
Use when: Use for cards, muted sections, info blocks and containers with visual presence.
Import
import { Surface } from "@components/index";Example
<Surface variant="info" display="grid" gap="s8">...</Surface>
Available Props
variant"card" | "muted" | ...
Selects the visual recipe.
display"grid" | "flex" | ...
Optional internal layout mode.
paddingSpaceToken
Adjusts inner spacing.
Live Preview
Surface Preview
Use different variants to express hierarchy and semantic meaning.
Controls
card
muted
info
danger
dashed
display: grid
display: flex
padding: s12
padding: s16
padding: s24