About
A lightweight container component used by the engine's DomAdapter for world-space and screen-space UI panels.
Supports 5 padding presets (none, sm, md, lg, xl)
and an elevated attribute for drop-shadow. Children are rendered in the light DOM.
Padding Sizes
padding="none" — No padding at all. Content touches edges.
padding="sm" — Small padding for tight layouts.
padding="md" — Default medium padding.
padding="lg" — Large padding for spacious content.
padding="xl" — Extra large padding for hero areas.
<ars-panel padding="md">
<p>Content here</p>
</ars-panel>
Elevated (Shadow)
Elevated panel
Adds a box-shadow for a floating card effect.
Flat panel
Default without elevation — border only.
<ars-panel padding="md" elevated>…</ars-panel>
Nested Panels
Outer Panel
Inner panel — flat, nested inside the elevated outer panel.
<ars-panel padding="lg" elevated>
<h4>Outer Panel</h4>
<ars-panel padding="md">Inner content</ars-panel>
</ars-panel>
With Components Inside
User Profile
Theme Toggle
Usage
<ars-panel padding="lg" elevated>
<h2>Card Title</h2>
<p>Content inside the panel.</p>
</ars-panel>
<script type="module">
import { ArsPanel } from 'ars-web-components';
</script>