Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Layr - Carbon UI
Getting started
IBM Carbon
Carbon UI
Pro
Components
Accordion
Ai Label
Ai Skeleton
Breadcrumb
Button
Chat Button
Checkbox
Code Snippet
Combo Box
Content Switcher
Copy Button
Data Table
Date Picker
Dropdown
File Uploader
Form Group
Icon Button
Icon Indicator
Inline Loading
Layer
Link
List
Loading
Modal
Multi Select
Notification
Number Input
Overflow Menu
Pagination
Popover
Progress Bar
Progress Indicator
Radio Button
Search
Select
Side Panel
Skeleton Icon
Skeleton Placeholder
Skeleton Text
Skip To Content
Slider
Stack
Structured List
Tabs
Tag
Tearsheet
Text Input
Textarea
Tile
Toggle
Toggletip
Tooltip
Ui Shell
</pre> <h2 id="component-api">Component API</h2> <h3>cds-layer Attributes</h3> <ul> <li><strong>level</strong>: Number - Custom layer level (0, 1, 2, etc.)</li> <li><strong>with-background</strong>: Boolean - Applies background color using layer tokens</li> </ul> <h3>Basic Usage</h3> <pre><code><cds-layer> <div>Content rendered on layer</div> </cds-layer> <cds-layer with-background> <div>Content with background</div> </cds-layer> <cds-layer level="2"> <div>Content at custom level 2</div> </cds-layer></code></pre> <h2 id="cdn">CDN</h2> <p>This page uses: <code>layer.min.js</code> via <strong>https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/layer.min.js</strong> </p> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on <a href="https://github.com/carbon-design-system/carbon/edit/main/packages/web-components/src/components/layer/layer.mdx" target="_blank">GitHub</a>. </p> <script> // Layer detection functionality document.addEventListener(`cds-use-layer`, (e) => { const { layer, level } = e.detail; const targetElement = layer.querySelector(\'.example-layer-test-component.use-layer\'); if (targetElement) { targetElement.innerText = `The current layer level is: ${level + 1}`; } }); // Add click handlers to layer test components document.addEventListener(\'DOMContentLoaded\', () => { const layerTestComponents = document.querySelectorAll(\'.example-layer-test-component.use-layer\'); layerTestComponents.forEach(component => { component.style.cursor = \'pointer\'; component.addEventListener(\'click\', () => { // Dispatch custom event to detect layer const event = new CustomEvent(\'cds-use-layer\', { detail: { layer: component.closest(\'cds-layer\'), level: component.closest(\'cds-layer\').level || 0 } }); document.dispatchEvent(event); }); }); }); </script> </body> </html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">