information

You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20

A Welcome Mat provides a series of unordered items a user can click to learn about a thematic topic.

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">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">

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">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">

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.

<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">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">

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.

<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">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">

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">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">

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">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">

Overview of CSS Classes#

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-welcome-mat`
Summary	Welcome Mat component
Support	dev-ready
Restrict	`div`
Variant	True

Selector	`.slds-modal__container`Deprecated
Summary	Modal container sizing within Welcome Mat
Restrict	`.slds-welcome-mat`

Selector	`.slds-welcome-mat__content`
Summary	Content container for the whole Welcome Mat
Restrict	`.slds-welcome-mat div`

Selector	`.slds-welcome-mat__info`
Summary	Container element for the informational side of the Welcome Mat
Restrict	`.slds-welcome-mat__content div`

Selector	`.slds-welcome-mat__info-content`
Summary	Content container for the informational side of the Welcome Mat. Centers in container space.
Restrict	`.slds-welcome-mat__info div`

Selector	`.slds-welcome-mat__info-title`
Summary	Title element for the informational side of the Welcome Mat
Restrict	`.slds-welcome-mat__info-content h2`

Selector	`.slds-welcome-mat__info-description`
Summary	Description container for the informational side of the Welcome Mat
Restrict	`.slds-welcome-mat__info-content p, .slds-welcome-mat__info-content div`

Selector	`.slds-welcome-mat__info-progress`
Summary	Text description of walkthrough progress
Restrict	`.slds-welcome-mat__info-content div`

Selector	`.slds-welcome-mat__info-badge-container`
Summary	Badge container for Welcome Mat Trailhead Progress Info. Overrides properties for the check icon, specific for this variant.
Restrict	`.slds-welcome-mat__info-progress div`

Selector	`.slds-welcome-mat__info-badge`
Summary	Badge for the Trailhead Progress Info.
Restrict	`.slds-welcome-mat__info-badge-container img`

Selector	`.slds-welcome-mat__info-progress_complete`
Summary	Modifier for Completed progress. Shows completed checkmark.
Restrict	`.slds-welcome-mat__info-progress`
Modifier	True

Selector	`.slds-welcome-mat__tiles`
Summary	Container element for the Actions side of the Welcome Mat.
Restrict	`.slds-welcome-mat__content ul`

Selector	`.slds-welcome-mat__tile`
Summary	Welcome Mat Tile item. Shows an actionable step a user can take to complete a greater objective. Based on a SLDS Visual Picker.
Restrict	`.slds-welcome-mat__tiles li`

Selector	`.slds-welcome-mat__tile-figure`
Summary	Figure element for Welcome Mat Tile item, based on SLDS Media Object figure.
Restrict	`.slds-welcome-mat__tile .slds-media__figure div`

Selector	`.slds-welcome-mat__tile-title`
Summary	Title element for Welcome Mat Tile item.
Restrict	`.slds-welcome-mat__tile h3`

Selector	`.slds-welcome-mat__tile-body`
Summary	Body element for Welcome Mat Tile item, based on SLDS Media Object body.
Restrict	`.slds-welcome-mat__tile .slds-media__body div`

Selector	`.slds-welcome-mat__tile-description`
Summary	Description element for Welcome Mat Tile item.
Restrict	`.slds-welcome-mat__tile p`

Selector	`.slds-welcome-mat__tile-icon-container`
Summary	Icon Container for Welcome Mat Tile item.
Restrict	`.slds-welcome-mat__tile div`

Selector	`.slds-welcome-mat__tile_complete`
Summary	Complete modifier class for Welcome Mat Tile item.
Restrict	`.slds-welcome-mat__tile`
Modifier	True

Selector	`.slds-welcome-mat__tiles_info-only`
Summary	Sets tile area of Welcome Mat to read only
Restrict	`.slds-welcome-mat__tiles`

Selector	`.slds-welcome-mat_info-only`
Summary	Creates Welcome Mat Info Only
Support	dev-ready
Restrict	`.slds-welcome-mat`
Variant	True

Selector	`.slds-welcome-mat__tile_info-only`
Summary	Welcome Mat Tile with only info item. Shows informational content. Based on a SLDS Media Object.
Restrict	`.slds-welcome-mat_info-only li`

Selector	`.slds-welcome-mat_splash`
Summary	Creates Welcome Mat Full Width
Support	dev-ready
Restrict	`.slds-welcome-mat`
Variant	True

Selector	`.slds-welcome-mat_trailhead`
Summary	Creates Trailhead Connected Welcome Mat
Support	dev-ready
Restrict	`.slds-welcome-mat`
Variant	True

Welcome Mat Release Notes

2.8.1

Fixed

Fixed vertical alignment of slds-welcome-mat__info-content in IE11.

2.8.0

Added

Splash variant for one-time interstitial purposes
Info-only variant for informational purposes
slds-modal-small to size Welcome Mat modal
slds-welcome-mat_info-only can now set the slds-welcome-mat__tiles section to "info only" mode.
Markup structure so that slds-welcome-mat and slds-welcome-mat__content are now within slds-modal__content

Changed

Removed slds-welcome-mat from slds-modal
Removed slds-welcome-mat__content from slds-modal__content
Moved slds-grid from slds-modal__content to slds-welcome-mat__content

Deprecated

Deprecated .slds-welcome-mat .slds-modal-container selector for .slds-modal-small to be applied to slds-modal. To upgrade existing welcome mat, in slds-modal, replace slds-welcome-mat with slds-modal_small, and also remove slds-welcome-mat__content from slds-modal-container. Markup structure changes need to be made existing code. First, wrap the existing content of <div class='slds-modal-container'> with <div class='slds-welcome-mat__content slds-grid'>. Then, wrap <div class='slds-welcome-mat__content slds-grid'> with <div class='slds-welcome-mat'>.

Fixed

Fixed vertical alignment of slds-welcome-mat__info-content in IE11.

2.7.0

Changed

Updated the semantics of steps in a welcome mat to be list items within an unordered list. Check out the component documentation for the updated DOM structure

Sections

About Welcome Mat#

Base#

Examples#

With Completed Steps#

Trailhead Connected#

Trailhead Connected - Complete#

Info-only#

Splash#

Overview of CSS Classes#

What are these categories?

Welcome Mat Release Notes

2.8.1

Fixed

2.8.0

Added

Changed

Deprecated

Fixed

2.7.0

Changed

Cookie Consent Manager

General Information

General Information

Required Cookies

Required Cookies

First Party Cookies

Functional Cookies

Functional Cookies

First Party Cookies

Advertising Cookies

Advertising Cookies

33Across

33Across

33Across