apex:slds

Allows Visualforce pages to reference Lightning Design System styling and to include custom themes. Use this component instead of uploading the Lightning Design System as a static resource.

Include <apex:slds /> in a Visualforce page to use Lightning Design System stylesheets in the page.

In general, the Lightning Design System is already scoped. Visualforce pages that have showHeader="true" already apply a scoping CSS class slds-scope to the content of the page, so that your content is styled with the Lightning Design System. Additionally, pages with showHeader="false" and applyBodyTag="true" have the scoping class added to the <body> element in the page. If you set applyBodyTag or applyHtmlTag to false, however, 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 other images, use the URLFOR() formula function and the $Asset.SLDS global variable. 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.

Currently, if you are using the Salesforce sidebar, header, or built-in stylesheets, you can’t add attributes to the html tag. This means that SVG icons aren’t supported on your page if you don’t have showHeader, standardStylesheets, and sidebar set to false.

Note: The <apex:slds> component has known issues when creating PDF files from Visualforce pages. This component isn't supported for creating PDF files using <apex:page renderAs="pdf"> or in calls to PageReference.getContentAsPDF().

For examples of Lightning Design System styling, see the Salesforce Lightning Design System reference site.

This example shows the skeleton of a Visualforce page that implements the Lightning Design System.

<apex:page>

<apex:slds />
<!-- Your SLDS-styled content -->

</apex:page>
    
<apex:page showHeader="false" applyHtmlTag="false" applyBodyTag="false">

<head>
  <apex:slds /> 
</head>

<body class="slds-scope">
  <!-- Your SLDS-styled content -->
</body>

</apex:page>
 	

Attributes

Attribute Name Attribute Type Description Required? API Version Access
id String An identifier that allows the SLDS component to be referenced by other components in the page. 14.0 global
rendered Boolean A Boolean value that specifies whether the component is rendered on the page. If not specified, this value defaults to true. 39.0

See Also