Surface

A container that applies elevation shadows and surface background variants. Use it to build cards, panels, and layered layouts.

Playground

Controls

Elevation

Appearance

Background

Theme

HTMLReact

ShareCopy

Usage

<lt-surface elevation="2">
<p>Card content</p>
</lt-surface>

<lt-surface elevation="3" appearance="outlined">
<p>Outlined panel</p>
</lt-surface>

import { Surface } from '@latty-ds/react';

<Surface elevation="2">
<p>Card content</p>
</Surface>

<Surface elevation="3" appearance="outlined">
<p>Outlined panel</p>
</Surface>

<template>
<lt-surface elevation="2">
  <p>Card content</p>
</lt-surface>

<lt-surface elevation="3" appearance="outlined">
  <p>Outlined panel</p>
</lt-surface>
</template>

API