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
<span class="slds-truncate" title="Edit">Edit</span> </a> </li> <li class="slds-dropdown__item" role="presentation"> <a href="#" role="menuitem" onclick="handleAction(event, ''delete'')"> <span class="slds-truncate" title="Delete">Delete</span> </a> </li> </ul> </div> </div> </div> </div> </div> <!-- With icon --> <div class="demo-section"> <h3>With Icon</h3> <div class="slds-tile slds-media" onclick="handleTileClick(this)"> <div class="slds-media__figure"> <span class="slds-icon_container slds-icon-standard-contact" title="Contact"> <svg class="slds-icon slds-icon_medium" aria-hidden="true"> <use href="#standard-contact"></use> </svg> <span class="slds-assistive-text">Contact</span> </span> </div> <div class="slds-media__body"> <div class="slds-tile__detail"> <dl class="slds-list_horizontal slds-wrap"> <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Contact Name">Contact Name:</dt> <dd class="slds-item_detail slds-truncate" title="Lei Chan">Lei Chan</dd> <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Account Name">Account Name:</dt> <dd class="slds-item_detail slds-truncate" title="Salesforce">Salesforce</dd> </dl> </div> </div> </div> </div> <!-- With avatar --> <div class="demo-section"> <h3>With Avatar</h3> <div class="slds-tile slds-media" onclick="handleTileClick(this)"> <div class="slds-media__figure"> <span class="slds-avatar slds-avatar_medium"> <img alt="Person name" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMjAiIGZpbGw9IiMwMTc2RDMiLz4KPHN2ZyB4PSI4IiB5PSI4IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSI+CjxwYXRoIGQ9Ik0xMiAyQzEzLjEgMiAxNCAyLjkgMTQgNEMxNCA1LjEgMTMuMSA2IDEyIDZDMTAuOSA2IDEwIDUuMSAxMCA0QzEwIDIuOSAxMC45IDIgMTIgMlpNMjEgOVYyMkgxNVYxM0g5VjIySDNWOUMzIDcuOSAzLjkgNyA1IDdIMTlDMjAuMSA3IDIxIDcuOSAyMSA5WiIgZmlsbD0id2hpdGUiLz4KPHN2Zz4KPHN2Zz4=" title="Person name" /> </span> </div> <div class="slds-media__body"> <div class="slds-tile__detail"> <dl class="slds-list_horizontal slds-wrap"> <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Name">Name:</dt> <dd class="slds-item_detail slds-truncate" title="John Doe">John Doe</dd> <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Title">Title:</dt> <dd class="slds-item_detail slds-truncate" title="Senior Developer">Senior Developer</dd> </dl> </div> </div> </div> </div> <!-- Task --> <div class="demo-section"> <h3>Task</h3> <div class="slds-tile slds-media" onclick="handleTileClick(this)"> <div class="slds-media__figure"> <span class="slds-icon_container slds-icon-standard-task" title="Task"> <svg class="slds-icon slds-icon_medium" aria-hidden="true"> <use href="#standard-task"></use> </svg> <span class="slds-assistive-text">Task</span> </span> </div> <div class="slds-media__body"> <div class="slds-tile__detail"> <p class="slds-text-heading_medium slds-hyphenate">Follow up on '15 contact</p> <div class="slds-tile__detail-action"> <p class="slds-text-body_small">Task • <a href="#" title="Lei Chan - VP of Sales">Lei Chan - VP of Sales</a></p> </div> </div> </div> </div> </div> <!-- Article --> <div class="demo-section"> <h3>Article</h3> <div class="slds-tile slds-media" onclick="handleTileClick(this)"> <div class="slds-media__figure"> <span class="slds-icon_container slds-icon-standard-article" title="Article"> <svg class="slds-icon slds-icon_medium" aria-hidden="true"> <use href="#standard-article"></use> </svg> <span class="slds-assistive-text">Article</span> </span> </div> <div class="slds-media__body"> <div class="slds-tile__detail"> <p class="slds-text-heading_medium slds-hyphenate"> <a href="#" title="How to Use the Lightning Design System">How to Use the Lightning Design System</a> </p> <div class="slds-tile__detail-action"> <p class="slds-text-body_small">Article • Published by <a href="#" title="Salesforce UX">Salesforce UX</a></p> </div> </div> </div> </div> </div> <!-- Article with like bar --> <div class="demo-section"> <h3>Article with Like Bar</h3> <div class="slds-tile slds-media" onclick="handleTileClick(this)"> <div class="slds-media__figure"> <span class="slds-icon_container slds-icon-standard-article" title="Article"> <svg class="slds-icon slds-icon_medium" aria-hidden="true"> <use href="#standard-article"></use> </svg> <span class="slds-assistive-text">Article</span> </span> </div> <div class="slds-media__body"> <div class="slds-tile__detail"> <p class="slds-text-heading_medium slds-hyphenate"> <a href="#" title="Lightning Design System Best Practices">Lightning Design System Best Practices</a> </p> <div class="slds-tile__detail-action"> <p class="slds-text-body_small">Article • Published by <a href="#" title="Salesforce UX">Salesforce UX</a></p> <ul class="slds-list_horizontal slds-has-dividers_right slds-text-body_small"> <li class="slds-item"> <button class="slds-button slds-button_reset slds-text-color_weak" onclick="handleLike(event, this)"> <svg class="slds-icon slds-icon_xx-small slds-m-right_xx-small" aria-hidden="true"> <use href="#utility-like"></use> </svg> 42 Likes </button> </li> <li class="slds-item"> <button class="slds-button slds-button_reset slds-text-color_weak" onclick="handleComment(event)"> <svg class="slds-icon slds-icon_xx-small slds-m-right_xx-small" aria-hidden="true"> <use href="#utility-comments"></use> </svg> 12 Comments </button> </li> </ul> </div> </div> </div> </div> </div> <!-- Board --> <div class="demo-section"> <h3>Board</h3> <div class="slds-tile slds-media" onclick="handleTileClick(this)"> <div class="slds-media__figure"> <span class="slds-icon_container slds-icon-standard-dashboard" title="Board"> <svg class="slds-icon slds-icon_medium" aria-hidden="true"> <use href="#standard-dashboard"></use> </svg> <span class="slds-assistive-text">Board</span> </span> </div> <div class="slds-media__body"> <div class="slds-tile__detail"> <p class="slds-text-heading_medium slds-hyphenate"> <a href="#" title="Q4 Sales Dashboard">Q4 Sales Dashboard</a> </p> <div class="slds-tile__detail-action"> <p class="slds-text-body_small">Dashboard • Created by <a href="#" title="Sales Team">Sales Team</a></p> <p class="slds-text-body_small slds-text-color_weak">Last updated 2 hours ago</p> </div> </div> </div> </div> </div> <!-- Interactive Controls --> <div class="demo-section"> <h3>Interactive Controls</h3> <div class="demo-buttons"> <button class="slds-button slds-button_brand" onclick="highlightAllTiles()">Highlight All Tiles</button> <button class="slds-button slds-button_neutral" onclick="resetTileStyles()">Reset Styles</button> <button class="slds-button slds-button_outline-brand" onclick="addNewTile()">Add New Tile</button> </div> </div> <!-- Code Examples --> <h2>Component API</h2> <div class="code-example"> <h3>Basic Tile Structure</h3> <pre><code><div class="slds-tile slds-media"> <div class="slds-media__figure"> <span class="slds-icon_container slds-icon-standard-account" title="Account"> <svg class="slds-icon slds-icon_medium" aria-hidden="true"> <use href="#standard-account"></use> </svg> <span class="slds-assistive-text">Account</span> </span> </div> <div class="slds-media__body"> <div class="slds-tile__detail"> <dl class="slds-list_horizontal slds-wrap"> <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Name">Name:</dt> <dd class="slds-item_detail slds-truncate" title="Salesforce UX">Salesforce UX</dd> </dl> </div> </div></div></code></pre> </div> <h2>Styling Hooks Overview</h2> <p>The tile component supports various styling hooks for customization. Key classes include:</p> <ul> <li><code>slds-tile</code> - Main tile container</li> <li><code>slds-tile__detail</code> - Content area</li> <li><code>slds-tile__detail-action</code> - Action area</li> <li><code>slds-media__figure</code> - Icon/avatar container</li> <li><code>slds-media__body</code> - Main content body</li> </ul> <h2>CDN</h2> <p>This page uses the Salesforce Lightning Design System via: <strong>https://cdnjs.cloudflare.com/ajax/libs/design-system/2.27.2/styles/salesforce-lightning-design-system.min.css</strong> </p> <script> // Tile click handler function handleTileClick(tile) { // Add visual feedback tile.style.backgroundColor = "#f3f3f3"; setTimeout(() => { tile.style.backgroundColor = ""; }, 200); console.log("Tile clicked:", tile); } // Dropdown toggle function toggleDropdown(event, button) { event.stopPropagation(); const dropdown = button.nextElementSibling; const isVisible = dropdown.style.display === "block"; // Close all dropdowns first document.querySelectorAll(".slds-dropdown").forEach(d => { d.style.display = "none"; }); if (!isVisible) { dropdown.style.display = "block"; } } // Handle dropdown actions function handleAction(event, action) { event.preventDefault(); event.stopPropagation(); // Close dropdown const dropdown = event.target.closest(".slds-dropdown"); dropdown.style.display = "none"; console.log("Action:", action); alert(`${action.charAt(0).toUpperCase() + action.slice(1)} action triggered`); } // Handle like button function handleLike(event, button) { event.stopPropagation(); const currentText = button.textContent.trim(); const likeCount = parseInt(currentText.match(/\d+/)[0]); const isLiked = button.classList.contains("liked"); if (isLiked) { button.innerHTML = ` <svg class="slds-icon slds-icon_xx-small slds-m-right_xx-small" aria-hidden="true"> <use href="#utility-like"></use> </svg> ${likeCount - 1} Likes `; button.classList.remove("liked"); button.style.color = ""; } else { button.innerHTML = ` <svg class="slds-icon slds-icon_xx-small slds-m-right_xx-small" aria-hidden="true"> <use href="#utility-like"></use> </svg> ${likeCount + 1} Likes `; button.classList.add("liked"); button.style.color = "#0176d3"; } } // Handle comment button function handleComment(event) { event.stopPropagation(); alert("Comments feature would open here"); } // Interactive control functions function highlightAllTiles() { document.querySelectorAll(".slds-tile").forEach(tile => { tile.style.backgroundColor = "#e8f4fd"; tile.style.borderLeft = "4px solid #0176d3"; }); } function resetTileStyles() { document.querySelectorAll(".slds-tile").forEach(tile => { tile.style.backgroundColor = ""; tile.style.borderLeft = ""; }); } function addNewTile() { const container = document.querySelector(".demo-section:last-of-type"); const newTile = document.createElement("div"); newTile.className = "slds-tile slds-media"; newTile.style.marginTop = "1rem"; newTile.onclick = function() { handleTileClick( </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>