Using the Lightning Design System

Use the <apex:slds> element to incorporate the Lightning Design System in your Visualforce pages and align them with the styling of Lightning Experience. This component is a streamlined alternative to uploading the Lightning Design System as a static resource and using it in your Visualforce pages.

You don’t have to upload the Lightning Design System as a static resource. That means you can keep the syntax of your page simple and stay under the 250-MB static resource limit. To use Lightning Design System style sheets in your Visualforce page, add <apex:slds /> anywhere in your page markup.

To use Lightning Design System style sheets in your Visualforce page:

Add <apex:slds /> anywhere in your page markup.
Set the <apex:page> applyBodyTag or applyHtmlTag attribute to false.
Include the slds-scope class on any SLDS style or asset parent element.

Don’t wrap any Visualforce tags in the slds-scope element.

Warning

1<apex:page standardController="Account" applyBodyTag="false">
2    <apex:slds /> 
3 
4    <!-- any Visualforce component should be outside SLDS scoping element -->
5    <apex:outputField value="{!Account.OwnerId}" /> 
6 
7    <div class="slds-scope">
8    <!-- SLDS markup here -->
9    </div>
10</apex:page>

In general, the Lightning Design System is already scoped. However, if you set applyBodyTag or applyHtmlTag to false, you must include the scoping class slds-scope. Within the scoping class, your markup can reference Lightning Design System styles and assets.

To reference assets in the Lightning Design System, such as SVG icons and images, use the URLFOR() formula function and the $Asset global variable. Use the following markup, for example, to reference the SVG account icon.

1<svg aria-hidden="true" class="slds-icon">
2    <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
3</svg>

To use SVG icons, add the required XML namespaces by using xmlns="http://www.w3.org/2000/svg" and xmlns:xlink="http://www.w3.org/1999/xlink" in the html tag.

If you’re using the Salesforce sidebar, header, or built-in style sheets, you can’t add attributes to the html. VG icons are supported only if showHeader, standardStylesheets, and sidebar are set to false.

Note

Example

The following markup shows a simple account detail page. This page uses the Lightning Design System card element and the account standard controller. This page also includes the account PNG icon.

This page doesn’t have any data in it, unless you load it with a record ID. The Lightning Design System doesn’t support components that bring data into your Visualforce pages, such as <apex:pageBlock> and <apex:detail>. To access Salesforce data from pages using the Lightning Design System, use Remote Objects, JavaScript remoting, or REST API instead.

1<apex:page showHeader="false" standardStylesheets="false" sidebar="false" docType="html-5.0" standardController="Account" applyBodyTag="False" applyHtmlTag="False">
2<head>
3  <title>{! Account.Name }</title>
4  <apex:slds /> 
5</head>
6
7<body class="slds-scope">
8    <!-- MASTHEAD -->
9    <p class="slds-text-heading--label slds-m-bottom--small">
10      Using the Lightning Design System in Visualforce
11    </p>
12    <!-- / MASTHEAD -->
13        
14    <!-- PAGE HEADER -->
15    <p class="slds-text-title_caps slds-line-height--reset">Accounts</p>
16        <h1 class="slds-page-header__title slds-truncate" title="My Accounts">{! Account.Name }</h1>
17        <span class="slds-icon_container slds-icon-standard-account" title="Account Standard Icon">
18          <svg class="slds-icon slds-page-header__icon" aria-hidden="true">
19              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}" />
20          </svg>
21        </span>
22          <!-- / HEADING AREA -->
23      <div class="slds-col slds-no-flex slds-grid slds-align-top">
24        <button class="slds-button slds-button--neutral">New Account</button>
25      </div>
26    <!-- / PAGE HEADER -->
27
28    <!-- ACCOUNT DETAIL CARD -->
29    <div class="slds-panel slds-grid slds-grid--vertical slds-nowrap">
30      <div class="slds-form--stacked slds-grow slds-scrollable--y">
31
32        <div class="slds-panel__section">
33          <h3 class="slds-text-heading--small slds-m-bottom--medium">Account Detail</h3>
34          <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
35            <span class="slds-form-element__label">Name</span>
36            <div class="slds-form-element__control">
37              <span class="slds-form-element__static">{! Account.Name }</span>
38            </div>
39          </div>
40          <div class="slds-form-element slds-hint-parent slds-has-divider--bottom">
41            <span class="slds-form-element__label">Phone</span>
42            <div class="slds-form-element__control">
43              <span class="slds-form-element__static">{! Account.Phone }</span>
44            </div>
45          </div>
46        </div>
47        <div class="slds-panel__section slds-has-divider--bottom">
48          <div class="slds-media">
49            <div class="slds-media__body">
50              <div class="slds-button-group slds-m-top--small" role="group">
51                <button class="slds-button slds-button--neutral slds-grow">Edit</button>
52                <button class="slds-button slds-button--neutral slds-grow">Save</button>
53                 <button class="slds-button slds-button--neutral slds-grow">New Account</button>
54              </div>
55            </div>
56          </div>
57        </div>
58      </div>
59    </div>
60    <!-- / ACCOUNT DETAIL CARD -->
61</body>
62</apex:page>

For more examples of Lightning Design System styling, see the Salesforce Lightning Design System reference site, and learn more about the Lightning Design System on Trailhead.

Visualforce Developer Guide

Using the Lightning Design System

Example