Surface

Visual layer containing content or controls.

html

<div class="uif-srf-stage uif-srf-stage--base" data-surface="card">
  <div class="uif-srf-panel uif-srf-panel--card" style="box-shadow:0 12px 12px rgba(36,20,48,.22); background:#FAF7F2;">card surface</div>
  <div class="uif-srf-panel uif-srf-panel--sheet" style="box-shadow:0 12px 12px rgba(36,20,48,.22); background:#FAF7F2;">sheet surface</div>
  <div class="uif-srf-panel uif-srf-panel--popover" style="box-shadow:0 12px 12px rgba(36,20,48,.22); background:#FAF7F2;">popover surface</div>
  <p class="uif-srf-caption">Elevation 12 &mdash; a card surface sits above the base layer</p>
</div>
<style>
.uif-srf-stage { width: 100%; max-width: 320px; padding: 26px; background: #D9C8F022; border: 1px solid #24143022; border-radius: 12px; font: 12px system-ui, sans-serif; color: #241430aa; text-align: center; }
.uif-srf-stage--base { background-image: repeating-linear-gradient(45deg, #24143008 0 6px, transparent 6px 12px); }
.uif-srf-panel { display: none; margin: 0 auto; padding: 16px; border-radius: 10px; font-weight: 600; color: #241430; }
.uif-srf-panel--sheet { border-radius: 14px 14px 0 0; }
.uif-srf-panel--popover { border-radius: 8px; max-width: 140px; }
[data-surface="card"] .uif-srf-panel--card,
[data-surface="sheet"] .uif-srf-panel--sheet,
[data-surface="popover"] .uif-srf-panel--popover { display: block; }
</style>

tailwind

<div class="tw-srf-stage tw-srf-base w-full max-w-[320px] p-[26px] bg-[#D9C8F022] border border-[#24143022] rounded-xl font-sans text-xs text-[#241430]/70 text-center" data-surface="card">
  <div class="tw-srf-card hidden mx-auto p-4 rounded-[10px] font-semibold text-[#241430]" style="box-shadow:0 12px 12px rgba(36,20,48,.22); background:#FAF7F2;">card surface</div>
  <div class="tw-srf-sheet hidden mx-auto p-4 rounded-t-[14px] font-semibold text-[#241430]" style="box-shadow:0 12px 12px rgba(36,20,48,.22); background:#FAF7F2;">sheet surface</div>
  <div class="tw-srf-popover hidden mx-auto p-4 rounded-lg max-w-[140px] font-semibold text-[#241430]" style="box-shadow:0 12px 12px rgba(36,20,48,.22); background:#FAF7F2;">popover surface</div>
  <p class="mt-2">Elevation 12 &mdash; a card surface sits above the base layer</p>
</div>
<style>
.tw-srf-base { background-image: repeating-linear-gradient(45deg, #24143008 0 6px, transparent 6px 12px); }
[data-surface="card"] .tw-srf-card,
[data-surface="sheet"] .tw-srf-sheet,
[data-surface="popover"] .tw-srf-popover { display: block; }
</style>

react

export function Surface({
  elevation = 12,
  surfaceType = "card",
  showBase = true,
  accent = "#FAF7F2",
}) {
  const shadow = `0 ${elevation}px ${elevation}px rgba(36,20,48,.22)`;
  const shapes = {
    card: { borderRadius: 10 },
    sheet: { borderRadius: "14px 14px 0 0" },
    popover: { borderRadius: 8, maxWidth: 140 },
  }[surfaceType];
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 26, background: showBase ? "repeating-linear-gradient(45deg, #24143008 0 6px, transparent 6px 12px), #D9C8F022" : "#D9C8F022", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430aa", textAlign: "center" }}>
      <div style={{ margin: "0 auto", padding: 16, fontWeight: 600, color: "#241430", background: accent, boxShadow: shadow, ...shapes }}>{surfaceType} surface</div>
      <p style={{ margin: "8px 0 0" }}>Elevation {elevation} &mdash; a surface sits above the base layer</p>
    </div>
  );
}