Skip to main content

<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>
Surface container with border, radius, and nested level support. Levels 1–3 map to progressively insetter surface tokens. In a normal DOM tree the level is inferred automatically from nesting; as an isolated web component (where descendant CSS can’t cross the shadow boundary) set the level prop explicitly. padding and rounding map to the --padding-* and --radius-* scales.

​
Usage

<juo-card>Card</juo-card>

​
Reference

​
Parameters

​
level
attr · 1 | 2 | 3
Surface level. Omit to infer from DOM nesting; set explicitly for web-component nesting.
​
padding
attr · md | sm | lg | xl | none | xs | 2xl | 3xl
Inner padding, from the --padding-* scale.
​
rounding
attr · md | sm | lg | xl | none | xs | full
Corner rounding, from the --radius-* scale. Defaults to the level’s radius.

​
Slots

​
default
slot