Salesforce Lightning – Design a Visualforce Page(Standard Account Creation Page) using Lightning design System

Before we move on to Visualforce Page in Lightning Design System users should know what is Lightning Design System?

Lightning Design System is a Pure CSS framework or it is a collection of design patterns, components and guidelines for creating unified UI in Salesforce ecosystem.

Lightning Design System along with Visualforce Build a Page in the Lightning UI Look and feel.

For more details, please check out the Lightning Design System

Using the Lightning Design System in Visualforce you Must have to Use Below 2 Tags

  1. <apex:slds /> tag : This tag Import the Design system Styles and assets in your Visualforce Page.
  2.  <div class = “slds-scope” > wrapper : wrap All your Code in this Wrapper because Lightning Design System Styles can only applied to elements within this wrapper.

Use SVG icons, add the xmlns attributes to the element Like


So Start Making a Visualforce Page Step by Step

Step 1 – Add the <apex:slds /> and <div class = “slds-scope” > wrapper in Visualforce Page.

<apex:page showHeader="false" standardController="Account" standardStylesheets="false" sidebar="false" docType="html-5.0">

<html xmlns="" xmlns:xlink="" lang="en">

<!-- Import the Lightning Design System style sheet -->
<apex:slds />



<div class="slds-scope">
<p class="slds-text-heading--label slds-m-bottom--small"> Hi ! This is Your Visualforce Page with Lightning Design System</p>


Preview of Step 1

1st Image

Step 2 – Add a Modal in <div class = “slds-scope” > tag.

<!-- Modal -->
<div role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open slds-modal--medium">
<div class="modal-container slds-modal__container">
<!-- Modal Header -->
<div class="slds-modal__header">
<button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close">
<svg class="slds-button__icon slds-button__icon--large" aria-hidden="true">
<use xmlns:xlink="" xlink:href="{!URLFOR($Asset.SLDS,'/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>
<span class="slds-assistive-text">Close</span>
<h2 id="header43" class="slds-text-heading--medium">Create Account</h2>
<!-- / Modal Header -->
<!-- Modal Content -->
<div class="slds-modal__content slds-p-around--medium"></div>
<!-- / Modal Content -->
<!-- Modal Footer -->
<div class="slds-modal__footer">
<button class="slds-button slds-button--neutral">Cancel</button>
<button class="slds-button slds-button--brand">Save</button></div>
<!-- / Modal Footer --></div>
<!-- / Modal -->
<div class="slds-backdrop slds-backdrop--open"></div>

Code Highlights

  1. ‘aria-labelledby’ attribute in Modal whose Value is the Id of Modal Heading.
  2. <use> tag under the <svg> Tag Must Bound with

Preview of Step 2

2nd Image

Step 3 – Insert Compound Form for Account Input Fields in Modal Content<div class=”slds-modal__content slds-p-around–medium”> tag.

Compound Form consists of form groups that are by . It requires the .slds-form–compound class .

<h3 class="slds-section-title--divider">Account Information</h3>
<fieldset class="slds-form--compound">
<div class="slds-form-element__group">
<div class="slds-form-element__row">
<div class="slds-form-element slds-size--1-of-2">
<span class="slds-form-element__label">Account Owner</span>
<div class="slds-form-element__control ">
<span class="slds-form-element__static">Sagar Sindhi</span></div>
<div class="slds-form-element slds-size--1-of-2">
<label class="slds-form-element__label" for="select-01">Rating</label>
<div class="slds-form-element__control">
<div class="slds-select_container">
<select id="select-01" class="slds-select">
<div class="slds-form-element__row">
<div class="slds-form-element slds-size--1-of-2">
<label class="slds-form-element__label" for="input-03">
<abbr class="slds-required" title="required">*</abbr> Account Name</label>
<input type="text" required="" id="input-03" class="slds-input" /></div>
<div class="slds-form-element slds-size--1-of-2">
<label class="slds-form-element__label" for="input-04">Phone</label>
<input type="text" id="input-04" class="slds-input" /></div>

Preview of Step 3

3rd image

For More Details of Html Tags  for Lightning Design you can go to Lightning Design System .  Here you can Everything for Lightning Design System .

Please Like if you like my Blog and share your valuable inputs.

2 thoughts on “Salesforce Lightning – Design a Visualforce Page(Standard Account Creation Page) using Lightning design System

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s