Card

<style>
  /* Cards inherit surface colours from the active theme. Supply a representative
     surface scale via the public --theme-surface-* hooks so each level is distinct;
     the per-level styling itself comes from the real --card-{N}-* token chain. */
  .surface-demo {
    --theme-surface-1: #ffffff;  --theme-surface-1-border: #e5e7eb;
    --theme-surface-2: #f9fafb;  --theme-surface-2-border: #d1d5db;
    --theme-surface-3: #f3f4f6;  --theme-surface-3-border: #c7ccd5;
    width: 90%;
    font-family: sans-serif;
  }
  .surface-demo juo-card { display: block; }
  .label { margin: 0 0 8px; font-size: 11px; color: #6b7280; }
</style>
<div class="surface-demo">
  <juo-card level="1" padding="lg">
    <p class="label">Level 1</p>
    <juo-card level="2" padding="lg">
      <p class="label">Level 2</p>
      <juo-card level="3" padding="lg">
        <p class="label" style="margin:0;">Level 3</p>
      </juo-card>
    </juo-card>
  </juo-card>
</div>