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 stylesheets in your Visualforce page, add <apex:slds /> anywhere in your page markup.
The Lightning Design System is not uploaded as a static resource. This feature keeps the page syntax example under the 250-MB static resource limit.
Include the slds-scope class on any SLDS style or asset parent element.
Example:
<apex:page standardController="Account" applyBodyTag="false"> <apex:slds /> <!-- any Visualforce component should be outside SLDS scoping element --> <apex:outputField value="{!Account.OwnerId}" /> <div class="slds-scope"> <!-- SLDS markup here --> </div> </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.
<svg aria-hidden="true" class="slds-icon"> <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use> </svg>
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.
s 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, instead use Remote Objects, JavaScript remoting, or the REST API.
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" docType="html-5.0" standardController="Account" applyBodyTag="False" applyHtmlTag="False"> <head> <title>{! Account.Name }</title> <apex:slds /> </head> <body class="slds-scope"> <!-- MASTHEAD --> <p class="slds-text-heading--label slds-m-bottom--small"> Using the Lightning Design System in Visualforce </p> <!-- / MASTHEAD --> <!-- PAGE HEADER --> <p class="slds-text-title_caps slds-line-height--reset">Accounts</p> <h1 class="slds-page-header__title slds-truncate" title="My Accounts">{! Account.Name }</h1> <span class="slds-icon_container slds-icon-standard-account" title="Account Standard Icon"> <svg class="slds-icon slds-page-header__icon" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}" /> </svg> </span> <!-- / HEADING AREA --> <div class="slds-col slds-no-flex slds-grid slds-align-top"> <button class="slds-button slds-button--neutral">New Account</button> </div> </div> </div> <!-- / PAGE HEADER --> <!-- ACCOUNT DETAIL CARD --> <div class="slds-panel slds-grid slds-grid--vertical slds-nowrap"> <div class="slds-form--stacked slds-grow slds-scrollable--y"> <div class="slds-panel__section"> <h3 class="slds-text-heading--small slds-m-bottom--medium">Account Detail</h3> <div class="slds-form-element slds-hint-parent slds-has-divider--bottom"> <span class="slds-form-element__label">Name</span> <div class="slds-form-element__control"> <span class="slds-form-element__static">{! Account.Name }</span> </div> </div> <div class="slds-form-element slds-hint-parent slds-has-divider--bottom"> <span class="slds-form-element__label">Phone</span> <div class="slds-form-element__control"> <span class="slds-form-element__static">{! Account.Phone }</span> </div> </div> </div> <div class="slds-panel__section slds-has-divider--bottom"> <div class="slds-media"> <div class="slds-media__body"> <div class="slds-button-group slds-m-top--small" role="group"> <button class="slds-button slds-button--neutral slds-grow">Edit</button> <button class="slds-button slds-button--neutral slds-grow">Save</button> <button class="slds-button slds-button--neutral slds-grow">New Account</button> </div> </div> </div> </div> </div> </div> <!-- / ACCOUNT DETAIL CARD --> </body> </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.