apex:slds

Allows Visualforce pages to reference Lightning Design System styling. 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. 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 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.

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.

1<apex:page>
2
3<apex:slds />
4<!-- Your SLDS-styled content -->
5
6</apex:page>

1<apex:page showHeader="false" applyHtmlTag="false" applyBodyTag="false">
2
3<head>
4  <apex:slds /> 
5</head>
6
7<body class="slds-scope">
8  <!-- Your SLDS-styled content -->
9</body>
10
11</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

Visualforce Developer Guide

apex:slds

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

Attributes