Surfaces
Container backgrounds with different elevation levels
Variants
Default Surface
Primary surface level
Secondary Surface
Elevated content areas
Tertiary Surface
Nested containers
Transparent Surface
Transparent with border
<Surface variant="default" className="rounded-lg p-4">
<p>Default Surface</p>
</Surface>
<Surface variant="secondary" className="rounded-lg p-4">
<p>Secondary Surface</p>
</Surface>
<Surface variant="tertiary" className="rounded-lg p-4">
<p>Tertiary Surface</p>
</Surface>
<Surface variant="transparent" className="rounded-lg border p-4">
<p>Transparent Surface</p>
</Surface>Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'secondary' | 'tertiary' | 'transparent' | 'default' | Surface elevation level |