Panel

Bounded area containing related information.

html

<div class="panel-demo panel-demo--bordered" style="padding:16px;--accent:#D9C8F0;">
  <h4 class="panel-demo__title">Notes</h4>
  <p class="panel-demo__body">A bounded area for grouping information that belongs together.</p>
</div>
<style>
.panel-demo { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; box-sizing: border-box; border-radius: 8px; max-width: 340px; }
.panel-demo--bordered { border: 1.5px solid var(--accent); }
.panel-demo--raised { border: 1px solid transparent; box-shadow: 0 6px 18px rgba(36,20,48,.14); }
.panel-demo--tinted { border: 1px solid transparent; background: color-mix(in srgb, var(--accent) 22%, #FAF7F2); }
.panel-demo__title { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.panel-demo__body { margin: 0; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-sm text-[#241430] bg-[#FAF7F2] box-border rounded-lg max-w-[340px] panel-tw panel-tw--bordered" style="padding:16px;--accent:#D9C8F0;">
  <h4 class="m-0 mb-2 text-[15px] font-semibold">Notes</h4>
  <p class="m-0 text-[#241430]/80">A bounded area for grouping information that belongs together.</p>
</div>
<style>
.panel-tw--bordered { border: 1.5px solid var(--accent); }
.panel-tw--raised { border: 1px solid transparent; box-shadow: 0 6px 18px rgba(36,20,48,.14); }
.panel-tw--tinted { border: 1px solid transparent; background: color-mix(in srgb, var(--accent) 22%, #FAF7F2); }
</style>

react

export function Panel({
  title = "Notes",
  body = "A bounded area for grouping information that belongs together.",
  variant = "bordered",
  accent = "#D9C8F0",
  padding = 16,
}) {
  const wrap = {
    bordered: { border: `1.5px solid ${accent}` },
    raised: { border: "1px solid transparent", boxShadow: "0 6px 18px rgba(36,20,48,.14)" },
    tinted: { border: "1px solid transparent", background: `color-mix(in srgb, ${accent} 22%, #FAF7F2)` },
  }[variant] ?? {};
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", background: "#FAF7F2", boxSizing: "border-box", borderRadius: 8, maxWidth: 340, padding, ...wrap }}>
      <h4 style={{ margin: "0 0 8px", fontSize: 15, fontWeight: 600 }}>{title}</h4>
      <p style={{ margin: 0, color: "#241430cc" }}>{body}</p>
    </div>
  );
}