welcome-mat
About Welcome Mat
- Welcome Mat tiles may trigger walkthroughs, modals, videos, or navigate users to specific URLs.
- The Welcome Mat consists of two sections, the informational left pane and the actionable right pane.
- The left pane should be used to educate users as to the theme of the content displayed in the right pane.
- Icon choices, colors, and tile content can be customized to fit your experience.
Base
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small" aria-labelledby="welcome-mat-19-label" aria-describedby="welcome-mat-19-content" aria-modal="true">
<div class="slds-modal__container">
<header class="slds-modal__header slds-modal__header_empty">Examples
With Completed Steps
As users complete items in the list, the list updates to show as completed.
As tiles are completed, they move to the bottom of the list, and get a modifier class of slds-welcome-mat__tile_complete.
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small" aria-labelledby="welcome-mat-37-label" aria-describedby="welcome-mat-37-content" aria-modal="true">
<div class="slds-modal__container">
<header class="slds-modal__header slds-modal__header_empty">Trailhead Connected
The Trailhead Connected variant should only be used when users can achieve a badge in Trailhead for completing all steps in the current Welcome Mat.
Only Trailhead connected mats may have the Trailhead font for the header.
The Lightning Experience is here!
Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes.
Lightning Explorer
0/5 units completed
Welcome to Salesforce!
Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.
Learn About OpenCTI
Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.
Power Up the Utility Bar
Tap into case history or share notes with fellow agents—it all happens on the utility bar.
Customize your view
Tailor your cases to your team's workflow with custom list views.
Share the Knowledge
Harness your team's collective know-how with our powerful knowledge base.
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small" aria-labelledby="welcome-mat-55-label" aria-describedby="welcome-mat-55-content" aria-modal="true">
<div class="slds-modal__container">
<header class="slds-modal__header slds-modal__header_empty">Trailhead Connected - Complete
When all tiles on a Trailhead Connected Welcome Mat are completed, users should be presented with a message and link to view their new badge on their Trailblazer profile page.
When a class of slds-welcome-mat__info-progress_complete is added to the .slds-welcome-mat__info-progress element, the complete check mark will appear with the Trailhead badge.
Additionally, the progress indicator should be replaced with a button to view the badge on the user's Trailblazer profile page.
The Lightning Experience is here!
Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes.
Lightning Explorer
Cha-ching! You earned the badge.
Welcome to Salesforce!
Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.
Learn About OpenCTI
Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.
Power Up the Utility Bar
Tap into case history or share notes with fellow agents—it all happens on the utility bar.
Customize your view
Tailor your cases to your team's workflow with custom list views.
Share the Knowledge
Harness your team's collective know-how with our powerful knowledge base.
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small" aria-labelledby="welcome-mat-73-label" aria-describedby="welcome-mat-73-content" aria-modal="true">
<div class="slds-modal__container">
<header class="slds-modal__header slds-modal__header_empty">Info-only
In the event your displayed steps are informational rather than actionable, you can set the tiles to "info only" mode. In this variation, the <a> tags are removed from the tiles. The tiles also lose their button appearance, removing borders and shadows.
The tile container background changes from gray to white, which is done by applying the modifier class of slds-welcome-mat__tiles_info-only to the slds-welcome-mat__tiles element. Since the tiles aren't actionable, also apply the modifier class of slds-welcome-mat__tile-info-only to each slds-welcome-mat__tile element.
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small" aria-labelledby="welcome-mat-91-label" aria-describedby="welcome-mat-91-content" aria-modal="true">
<div class="slds-modal__container">
<header class="slds-modal__header slds-modal__header_empty">Splash
The Splash variant is a singular interstitial modal. It removes the actionable/content column and allows the background image to span the full-width. Make sure that the areas of your background image behind your text provide enough contrast to ensure accessibility.
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small" aria-labelledby="welcome-mat-99-label" aria-describedby="welcome-mat-99-content" aria-modal="true">
<div class="slds-modal__container">
<header class="slds-modal__header slds-modal__header_empty">