Layr
⌘K
Ctrl K
Design Systems
Pro
AI Designer
Account
Roadmap
Sign in
Getting started
Salesforce Lightning
Lightning UI
Pro
Components
Accordion
Activity Timeline
Alert
App Launcher
Avatar
Avatar Group
Badges
Brand Band
Breadcrumbs
Builder Header
Button Groups
Button Icons
Buttons
Cards
Carousel
Chat
Checkbox
Checkbox Button
Checkbox Button Group
Checkbox Toggle
Color Picker
Combobox
Counter
Data Tables
Datepickers
Datetime Picker
Docked Composer
Docked Form Footer
Docked Utility Bar
Drop Zone
Dueling Picklist
Dynamic Icons
Dynamic Menu
Einstein Header
Expandable Section
Expression
Feeds
File Selector
Files
Form Element
Form Layout
Global Header
Global Navigation
Icons
Illustration
Input
List Builder
Lookups
Lookups Mobile
Map
Menus
Modals
Notifications
Page Headers
Panels
Path
Path Simple
Picklist
Pills
Popovers
Process
Progress Bar
Progress Indicator
Progress Ring
Prompt
Publishers
Radio Button Group
Radio Group
Regions
Rich Text Editor
Scoped Notifications
Scoped Tabs
Select
Setup Assistant
Slider
Spinners
Split View
Summary Detail
Tabs
Textarea
Tiles
Timepicker
Toast
Tooltips
Tree Grid
Trees
Trial Bar
Vertical Navigation
Vertical Tabs
Visual Picker
Welcome Mat
```html
icon page</a>.)</p> <!-- Accessibility --> <h2>Accessibility</h2> <div class="accessibility-info"> <p>Icons require a containing element for two reasons:</p> <ul> <li>If assistive text is required, the containing element should contain both the icon and a <code><span></code> with hidden assistive text describing the icon using the <code>slds-assistive-text</code> class.</li> <li>If the icon is used without a visible, descriptive label, a <code>title</code> attribute is needed on the containing element. The <code>title</code> should describe the icon.</li> </ul> <p>If an icon has a visible label that describes what the icon represents, no title or hidden assistive text is required.</p> <p>The containing element must have the <code>slds-icon_container</code> class.</p> </div> <!-- Default --> <h2>Default</h2> <div class="demo-section"> <h3>Basic Icon Structure</h3> <div class="slds-icon_container" title="Add"> <svg class="slds-icon slds-icon-text-default" aria-hidden="true"> <use href="#add"></use> </svg> <span class="slds-assistive-text">Add</span> </div> </div> <!-- Structure and Implementation --> <div class="code-example"> <h3>Structure and Implementation</h3> <p>An icon must have a containing element with the class <code>slds-icon_container</code> for accessibility support. Inside the container, a <code><svg></code> with the class <code>slds-icon</code> contains the reference to your icon and a <code><span></code> with the class <code>slds-assistive-text</code> contains your hidden assistive text that describes the icon.</p> <pre><code><div class="slds-icon_container" title="when needed"> <svg class="slds-icon" aria-hidden="true"> <use href="#icon-name"></use> </svg> <span class="slds-assistive-text </div> <!-- Default Icon Example --> <div class="demo-section"> <h3>Default Icon Example</h3> <div class="slds-icon_container" title="User"> <svg class="slds-icon slds-icon-text-default" aria-hidden="true"> <use href="#user"></use> </svg> <span class="slds-assistive-text">User</span> </div> </div> <!-- About Icons --> <h2>About Icons</h2> <p>Five separate SVG sprites are used to create icons — <a href="#action">action</a>, <a href="#custom">custom</a>, <a href="#doctype">doctype</a>, <a href="#standard">standard</a> and <a href="#utility">utility</a>. Link to the icon SVG sprite by targeting the icon hash/ID value in the use href attribute.</p> <!-- Accessibility --> <h2>Accessibility</h2> <div class="accessibility-info"> <p><strong>Icons require a containing element for two reasons:</strong></p> <ul> <li>If assistive text is required, the containing element should contain both the icon and a <code><span></code> with hidden assistive text describing the icon using the <code>slds-assistive-text</code> class.</li> <li>If the icon is used without a visible, descriptive label, a <code>title</code> attribute is needed on the containing element. The <code>title</code> should describe the icon.</li> </ul> <p>If an icon has a visible label that describes what the icon represents, no title or hidden assistive text is required.</p> <p>The containing element must have the <code>slds-icon_container</code> class.</p> </div> <!-- Default --> <h2>Default</h2> <div class="demo-section"> <h3>Basic Icon Structure</h3> <div class="slds-icon_container" title="Account"> <svg class="slds-icon slds-icon-text-default" aria-hidden="true"> <use href="#account"></use> </svg> <span class="slds-assistive-text">Account</span> </div> </div> <!-- Structure and Implementation --> <div class="code-example"> <h3>Structure and Implementation</h3> <p>An icon must have a containing element with the class <code>slds-icon_container</code> for accessibility support. Inside the container, a <code><svg></code> with the class <code>slds-icon</code> contains the reference to your icon and a <code><span></code> with the class <code>slds-assistive-text</code> contains your hidden assistive text that describes the icon.</p> <pre><code><div class="slds-icon_container" title="when needed"> <svg class="slds-icon" aria-hidden="true"> <use href="/assets/icons/standard-sprite/svg/symbols.svg#case"></use> </svg> <span class="slds-assistive-text">Case</span></div></code></pre> </div> <!-- Types --> <h2>Types</h2> <p>All available SVG sprites fall into one of these five main categories: action, custom, doctype, standard, and utility.</p> <!-- Action Icons --> <div class="demo-section"> <h3>Action Icons</h3> <p>To view all available action icons, see <a href="https://www.lightningdesignsystem.com/icons/#action">action icons</a>.</p> <div class="icon-grid"> <div class="icon-demo"> <div class="slds-icon_container" title="Add Contact"> <svg class="slds-icon slds-icon-text-default" aria-hidden="true"> <use href="#add_contact"></use> </svg> <span class="slds-assistive-text">Add Contact</span> </div> <span>Add Contact</span> </div> <div class="icon-demo"> <div class="slds-icon_container" title="Edit"> <svg class="slds-icon slds-icon-text-default" aria-hidden="true"> <use href="#edit"></use> </svg> <span class="slds-assistive-text">Edit</span> </div> <span>Edit</span> </div> <div class="icon-demo"> <div class="slds-icon_container" title="Delete"> <svg class="slds-icon slds-icon-text-default" aria-hidden="true"> <use href="#delete"></use> </svg> <span class="slds-assistive-text">Delete</span> </div> <span>Delete</span> </div> </div> </div> <!-- Custom Icons --> <div class="demo-section"> <h3>Custom Icons</h3> <p>Custom icons have a rounded square shape and use a class on the container for the background color.</p> <div class="icon-grid"> <div class="icon-demo"> <div class="slds-icon_container slds-icon-custom-custom1" title="Custom 1"> <svg class="slds-icon" aria-hidden="true"> <use href="#custom1"></use> </svg> <span class="slds-assistive-text">Custom 1</span> </div> <span>Custom 1</span> </div> <div class="icon-demo"> <div class="slds-icon_container slds-icon-custom-custom2" title="Custom 2"> <svg class="slds-icon" aria-hidden="true"> <use href="#custom2"></use> </svg> <span class="slds-assistive-text">Custom 2</span> </div> <span>Custom 2</span> </div> </div> </div> <!-- Doctype Icons --> <div class="demo-section"> <h3>Doctype Icons</h3> <p>To view all available doctype icons, see <a href="https://www.lightningdesignsystem.com/icons/#doctype">doctype icons</a>.</p> <div class="icon-grid"> <div class="icon-demo"> <div class="slds-icon_container" title="PDF"> <svg class="slds-icon slds-icon-text-default" aria-hidden="true"> <use href="#pdf"></use> </svg> <span class="slds-assistive-text">PDF</span> </div> <span>PDF</span> </div> <div class="icon-demo"> <div class="slds-icon_container" title="Excel"> <svg class="slds-icon slds-icon-text-default" aria-hidden="true"> <use href="#excel"></use> </svg> <span class="slds-assistive-text">Excel</span> </div> <span>Excel</span> </div> </div> </div> <!-- Standard Icons --> <div class="demo-section"> <h3>Standard Icons</h3> <p>Standard icons have a rounded square shape and use a class on the container for the background color.</p> <div class="icon-grid"> <div class="icon-demo"> <div class="slds-icon_container slds-icon-standard-account" title="Account"> <svg class="slds-icon" aria-hidden="true"> <use href="#account"></use> </svg> <span class="slds-assistive-text">Account</span> </div> <span>Account</span> </div> <div class="icon-demo"> <div class="slds-icon_container slds-icon-standard-contact" title="Contact"> <svg class="slds-icon" aria-hidden="true"> <use href="#contact"></use> </svg> <span class="slds-assistive-text">Contact</span> </div> <span>Contact</span> </div> <div class="icon-demo"> <div class="slds-icon_container slds-icon-standard-opportunity" title="Opportunity"> <svg class="slds-icon" aria-hidden="true"> <use href="#opportunity"></use> </svg> <span class="slds-assistive-text">Opportunity</span> </div> <span>Opportunity</span> </div> </div> </div> <!-- Color --> <h2>Color</h2> <!-- Default Color --> <div class="demo-section"> <h3>Default</h3> <p>To change the fill of an icon to the default text color, add the <code>slds-icon-text-default</code> class to the icon.</p> <div class="color-demo"> <div class="slds-icon_container" title="User"> <svg class="slds-icon slds-icon-text-default" aria-hidden="true"> <use href="#user"></use> </svg> <span class="slds-assistive-text">User</span> </div> <span>Default color</span> </div> </div> <!-- Current Color --> <div class="demo-section"> <h3>Current Color</h3> <p>To change the fill of an icon to match the current color of its parent, add the <code>slds-current-color</code> class to the icon container.</p> <div class="color-demo" style="color: #0176d3;"> <div class="slds-icon_container slds-current-color </div> </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"> </div> </main> </body> </html> <script> document.addEventListener("turbo:load", function() { var alerts = document.querySelectorAll('.alert') alerts.forEach(function(alert) { new bootstrap.Alert(alert) }) }) </script> <!--popover--> <script> document.addEventListener("DOMContentLoaded", function () { const dropdowns = document.querySelectorAll('[data-controller="dropdown-popover"]'); for (let i = 0; i < dropdowns.length; i++) { const dropdown = dropdowns[i]; const button = dropdown.querySelector('[data-dropdown-popover-target="button"]'); const menu = dropdown.querySelector('[data-dropdown-popover-target="menu"]'); if (!button || !menu) continue; let open = false; // Open menu button.addEventListener("mouseenter", () => { menu.style.opacity = "1"; menu.style.marginLeft = "-140px"; menu.style.pointerEvents = "auto"; menu.style.display = "block"; open = true; }); // Close after leaving both button and menu button.addEventListener("mouseleave", () => { setTimeout(() => { if (!menu.matches(':hover')) { menu.style.opacity = "0"; menu.style.pointerEvents = "none"; menu.style.display = "none"; open = false; } }, 100); }); // Keep open while hovering over menu menu.addEventListener("mouseenter", () => { menu.style.opacity = "1"; menu.style.marginLeft = "-140px"; menu.style.pointerEvents = "auto"; menu.style.display = "block"; }); menu.addEventListener("mouseleave", () => { menu.style.opacity = "0"; menu.style.pointerEvents = "none"; menu.style.display = "none"; open = false; }); } }); </script> <!--sendJF--> <script> document.querySelectorAll('#sendFiddle').forEach((btn, index) => { btn.addEventListener('click', () => { const iframe = document.querySelectorAll('iframe')[index]; const srcdoc = iframe?.getAttribute('srcdoc'); if (!srcdoc) { alert('iframe srcdoc not available'); return; } // Extract <style> and <script> content from srcdoc using regex const cssMatches = [...srcdoc.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi)]; const jsMatches = [...srcdoc.matchAll(/<script[^>]*>([\s\S]*?)<\/script>/gi)]; const css = cssMatches.map(m => m[1]).join('\n'); const js = jsMatches.map(m => m[1]).join('\n'); // Remove <style> and <script> blocks to isolate HTML const html = srcdoc .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '') .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '') .replace(/</g, '<') .replace(/>/g, '>') .replace(/&/g, '&'); // Create and submit form to JSFiddle const form = document.createElement('form'); form.method = 'POST'; form.action = 'https://jsfiddle.net/api/post/library/pure/'; form.target = '_blank'; const addField = (name, value) => { const input = document.createElement('input'); input.type = 'hidden'; input.name = name; input.value = value; form.appendChild(input); }; addField('html', html.trim()); addField('css', css.trim()); addField('js', js.trim()); addField('title', 'From Layr iframe srcdoc'); document.body.appendChild(form); form.submit(); document.body.removeChild(form); }); }); </script> <!--fullscreen--> <script> document.querySelectorAll('#FullscreenTab').forEach((button) => { button.addEventListener('click', function () { // Prevent duplicate fullscreen overlays if (document.getElementById('fullscreen-iframe-wrapper')) return; // Find the closest snippet container and its iframe const snippetContainer = this.closest('[data-controller="snippet"]'); const iframe = snippetContainer?.querySelector('iframe'); if (!iframe) { console.error('No iframe found for this FullscreenTab.'); return; } // Create a cloned iframe using srcdoc or fallback to content HTML const iframeClone = document.createElement('iframe'); iframeClone.className = 'w-full h-full border-0 rounded-xl bg-white dark:bg-neutral-900'; iframeClone.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-forms'); iframeClone.srcdoc = iframe.srcdoc || iframe.contentDocument?.documentElement?.outerHTML; // Create overlay const overlay = document.createElement('div'); overlay.id = 'fullscreen-iframe-wrapper'; overlay.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4'; // Create container for iframe and close button const container = document.createElement('div'); container.className = ' iframe_main_show relative w-full max-w-6xl h-[90vh] bg-white dark:bg-neutral-900 rounded-xl overflow-hidden shadow-2xl'; // Close button const closeBtn = document.createElement('button'); closeBtn.innerHTML = '×'; closeBtn.className = ` absolute top-3 right-3 text-white text-2xl font-bold bg-black/40 hover:bg-black/70 rounded-full w-10 h-10 flex items-center justify-center transition `; closeBtn.addEventListener('click', () => overlay.remove()); // Assemble container.appendChild(closeBtn); container.appendChild(iframeClone); overlay.appendChild(container); document.body.appendChild(overlay); }); }); </script> </body> </html>