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
Contact Sales</li> <li class="slds-trial-menu__item" onclick="handleMenuAction(''view-plans'')">View Plans</li> <li class="slds-trial-menu__item" onclick="handleMenuAction(''trial-info'')">Trial Information</li> <li class="slds-trial-menu__item" onclick="handleMenuAction(''dismiss'')">Dismiss</li> </ul> </div> </div> </div> </div> <div class="slds-trial-progress"> <div class="slds-trial-progress__bar" style="width: 60%;"></div> </div> </div> </div> <!-- States Section --> <h3>States</h3> <!-- Menu Open State --> <h4>Menu - Open</h4> <div class="demo-section"> <h3>Trial Header with Open Menu</h3> <div class="slds-trial-header"> <div class="slds-trial-header__content"> <div class="slds-trial-header__info"> <svg class="slds-icon slds-icon_small" aria-hidden="true" style="fill: white;"> <use href="#info"></use> </svg> <span class="slds-trial-header__text"> Your trial expires in <span class="slds-trial-header__days">14 days</span> </span> </div> <div class="slds-trial-header__actions"> <button class="slds-button slds-button_outline-inverse slds-button_small"> Extend Trial </button> <button class="slds-button slds-button_brand slds-button_small"> Subscribe Now </button> <div class="slds-trial-menu"> <button class="slds-button slds-button_icon slds-button_icon-inverse" aria-haspopup="true" title="More Options"> <svg class="slds-button__icon" aria-hidden="true" style="fill: white;"> <use href="#down"></use> </svg> <span class="slds-assistive-text">More Options</span> </button> <div class="slds-trial-menu__dropdown slds-is-open"> <ul class="slds-trial-menu__list"> <li class="slds-trial-menu__item">Contact Sales</li> <li class="slds-trial-menu__item">View Plans</li> <li class="slds-trial-menu__item">Trial Information</li> <li class="slds-trial-menu__item">Dismiss</li> </ul> </div> </div> </div> </div> <div class="slds-trial-progress"> <div class="slds-trial-progress__bar" style="width: 60%;"></div> </div> </div> </div> <!-- Additional Variations --> <h2>Additional Variations</h2> <!-- Urgent State --> <div class="demo-section"> <h3>Urgent State (3 days remaining)</h3> <div class="slds-trial-header" style="background: linear-gradient(135deg, #fe9339 0%, #d73449 100%);"> <div class="slds-trial-header__content"> <div class="slds-trial-header__info"> <svg class="slds-icon slds-icon_small" aria-hidden="true" style="fill: white;"> <use href="#warning"></use> </svg> <span class="slds-trial-header__text"> Your trial expires in <span class="slds-trial-header__days">3 days</span> </span> </div> <div class="slds-trial-header__actions"> <button class="slds-button slds-button_brand slds-button_small"> Subscribe Now </button> </div> </div> <div class="slds-trial-progress"> <div class="slds-trial-progress__bar" style="width: 90%;"></div> </div> </div> </div> <!-- Success State --> <div class="demo-section"> <h3>Success State (Subscription Active)</h3> <div class="slds-trial-header" style="background: linear-gradient(135deg, #04844b 0%, #2e844a 100%);"> <div class="slds-trial-header__content"> <div class="slds-trial-header__info"> <svg class="slds-icon slds-icon_small" aria-hidden="true" style="fill: white;"> <use href="#success"></use> </svg> <span class="slds-trial-header__text"> Your subscription is active </span> </div> <div class="slds-trial-header__actions"> <button class="slds-button slds-button_outline-inverse slds-button_small"> Manage Subscription </button> </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="simulateTrialProgress()">Simulate Trial Progress</button> <button class="slds-button slds-button_neutral" onclick="resetTrialProgress()">Reset Progress</button> <button class="slds-button slds-button_outline-brand" onclick="toggleAllMenus()">Toggle All Menus</button> </div> </div> <!-- Code Examples --> <h2>Component Structure</h2> <div class="code-example"> <h3>Basic Trial Header Structure</h3> <pre><code><div class="slds-trial-header"> <div class="slds-trial-header__content"> <div class="slds-trial-header__info"> <svg class="slds-icon slds-icon_small" aria-hidden="true"> <use href="#info"></use> </svg> <span class="slds-trial-header__text"> Your trial expires in <span class="slds-trial-header__days">14 days</span> </span> </div> <div class="slds-trial-header__actions"> <button class="slds-button slds-button_outline-inverse slds-button_small"> Extend Trial </button> <button class="slds-button slds-button_brand slds-button_small"> Subscribe Now </button> </div> </div> <div class="slds-trial-progress"> <div class="slds-trial-progress__bar" style="width: 60%;"></div> </div></div></code></pre> </div> <h2>Usage Guidelines</h2> <div class="code-example"> <h3>Implementation Notes</h3> <ul> <li>Trial bars should be prominently displayed at the top of the application</li> <li>Use progressive disclosure with the dropdown menu for additional actions</li> <li>Progress bar should reflect the remaining trial time</li> <li>Color coding helps indicate urgency (blue = normal, orange/red = urgent, green = success)</li> <li>Ensure all interactive elements are keyboard accessible</li> </ul> </div> <script> // Trial menu functionality function toggleTrialMenu() { const menu = document.getElementById("trial-menu"); menu.classList.toggle("slds-is-open"); } function handleMenuAction(action) { console.log("Menu action:", action); // Close menu after action const menu = document.getElementById("trial-menu"); menu.classList.remove("slds-is-open"); // Show feedback const message = getActionMessage(action); showNotification(message); } function getActionMessage(action) { const messages = { "contact-sales": "Redirecting to sales contact form...", "view-plans": "Opening subscription plans...", "trial-info": "Displaying trial information...", "dismiss": "Trial notification dismissed" }; return messages[action] || "Action completed"; } function showNotification(message) { // Create a simple notification const notification = document.createElement("div"); notification.className = "slds-notify slds-notify_toast slds-theme_success"; notification.style.position = "fixed"; notification.style.top = "20px"; notification.style.right = "20px"; notification.style.zIndex = "9999"; notification.innerHTML = ` <div class="slds-notify__content"> <h2 class="slds-text-heading_small">${message}</h2> </div> `; document.body.appendChild(notification); // Remove after 3 seconds setTimeout(() => { if (notification.parentNode) { notification.parentNode.removeChild(notification); } }, 3000); } // Interactive demo functions function simulateTrialProgress() { const progressBars = document.querySelectorAll(".slds-trial-progress__bar"); progressBars.forEach(bar => { const currentWidth = parseInt(bar.style.width) || 60; const newWidth = Math.min(currentWidth + 10, 100); bar.style.width = newWidth + "%"; }); // Update days remaining const daysElements = document.querySelectorAll(".slds-trial-header__days"); daysElements.forEach(element => { const currentDays = parseInt(element.textContent); if (currentDays > 1) { element.textContent = (currentDays - 1) + " days"; } }); } function resetTrialProgress() { const progressBars = document.querySelectorAll(".slds-trial-progress__bar"); progressBars.forEach(bar => { bar.style.width = "60%"; }); // Reset days const daysElements = document.querySelectorAll(".slds-trial-header__days"); daysElements.forEach(element => { element.textContent = "14 days"; }); } function toggleAllMenus() { const menus = document.querySelectorAll(".slds-trial-menu__dropdown"); menus.forEach(menu => { menu.classList.toggle("slds-is-open"); }); } // Close menus when clicking outside document.addEventListener("click", function(event) { if (!event.target.closest(".slds-trial-menu")) { const openMenus = document.querySelectorAll(".slds-trial-menu__dropdown.slds-is-open"); openMenus.forEach(menu => { menu.classList.remove("slds-is-open"); }); } }); // Keyboard navigation for menus document.addEventListener("keydown", function(event) { if (event.key === "Escape") { const openMenus = document.querySelectorAll(".slds-trial-menu__dropdown.slds-is-open"); openMenus.forEach(menu => { menu.classList.remove("slds-is-open"); }); } }); // Initialize component document.addEventListener("DOMContentLoaded", function() { console.log("Trial bar components initialized"); }); </script></body></html>' width="100%" height="1600" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">