Salesforce Lightning Design System(SLDS) Examples:
In the below examples i am using static resources that i got from SLDS unmanaged package installation. Once you installed the SLDS package you will get the static resource that contains CSS, Images, Avatars etc....
Example 1: Create a basic example of Salesforce Lightning Design System.
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title>Salesforce Lightning Design System Trailhead Module</title>
<apex:stylesheet value="{!URLFOR($Resource.SLDS100, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
</head>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds">
<!-- MASTHEAD -->
<p class="slds-text-heading--label slds-m-bottom--small">
Salesforce Lightning Design System Trailhead Module
</p>
<!-- / MASTHEAD -->
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">
<!-- SECTION - BADGE COMPONENTS -->
<section aria-labelledby="badges">
<h2 id="badges" class="slds-text-heading--large slds-m-vertical--large">Badges</h2>
<div>
<span class="slds-badge">Badge</span>
<span class="slds-badge slds-theme--inverse">Badge</span>
</div>
</section>
<!-- / SECTION - BADGE COMPONENTS -->
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
</body>
</html>
</apex:page>
Example2 : Salesforce Lightning Design System with List view example.
In this example i am displaying static list views details.
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title>Salesforce Lightning Design System Trailhead Module</title>
<apex:stylesheet value="{!URLFOR($Resource.SLDS100, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
</head>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds">
<!-- MASTHEAD -->
<p class="slds-text-heading--label slds-m-bottom--small">Salesforce Lightning Design System Module</p>
<!-- / MASTHEAD -->
<!-- PAGE HEADER -->
<div class="slds-page-header" role="banner">
<!-- LAYOUT GRID -->
<div class="slds-grid">
<!-- GRID COL -->
<div class="slds-col">
<!-- HEADING AREA -->
<p class="slds-text-heading--label">Accounts</p>
<h1 class="slds-text-heading--medium">My Accounts</h1>
<!-- /HEADING AREA -->
</div>
<!-- GRID COL -->
<div class="slds-col slds-no-flex slds-align-middle">
<div class="slds-button-group" role="group">
<button class="slds-button slds-button--neutral">
New Account
</button>
<button class="slds-button slds-button--neutral">
More
</button>
</div>
</div>
<!-- / GRID COL -->
</div>
<!-- / LAYOUT GRID -->
<p class="slds-text-body--small slds-m-top--x-small">COUNT items</p>
</div>
<!-- / PAGE HEADER -->
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">
<ul class="slds-list--dotted slds-m-top--large">
<li>Account 1</li>
<li>Account 2</li>
<li>Account 3</li>
<li>Account 4</li>
<li>Account 5</li>
<li>Account 6</li>
<li>Account 7</li>
<li>Account 8</li>
<li>Account 9</li>
<li>Account 10</li>
</ul>
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
<!-- FOOTER -->
<footer role="contentinfo" class="slds-p-around--large">
<!-- LAYOUT GRID -->
<div class="slds-grid slds-grid--align-spread">
<p class="slds-col">Salesforce Lightning Design System Example</p>
<p class="slds-col">© Your Name Here</p>
</div>
<!-- / LAYOUT GRID -->
</footer>
<!-- / FOOTER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
</body>
<!-- JAVASCRIPT -->
<!-- / JAVASCRIPT -->
</html>
</apex:page>
Example 3 : Salesforce Lightning Design System(SLDS) list view example with Account object.
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title>Salesforce Lightning Design System Trailhead Module</title>
<apex:stylesheet value="{!URLFOR($Resource.SLDS100, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
</head>
<apex:remoteObjects >
<apex:remoteObjectModel name="Account" fields="Id,Name,LastModifiedDate"/>
</apex:remoteObjects>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds">
<!-- MASTHEAD -->
<p class="slds-text-heading--label slds-m-bottom--small">Salesforce Lightning Design System Module</p>
<!-- / MASTHEAD -->
<!-- PAGE HEADER -->
<div class="slds-page-header" role="banner">
<!-- LAYOUT GRID -->
<div class="slds-grid">
<!-- GRID COL -->
<div class="slds-col">
<!-- HEADING AREA -->
<p class="slds-text-heading--label">Accounts</p>
<h1 class="slds-text-heading--medium">My Accounts</h1>
<!-- /HEADING AREA -->
</div>
<!-- GRID COL -->
<div class="slds-col slds-no-flex slds-align-middle">
<div class="slds-button-group" role="group">
<button class="slds-button slds-button--neutral">
New Account
</button>
<button class="slds-button slds-button--neutral">
More
</button>
</div>
</div>
<!-- / GRID COL -->
</div>
<!-- / LAYOUT GRID -->
<p class="slds-text-body--small slds-m-top--x-small">COUNT items</p>
</div>
<!-- / PAGE HEADER -->
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">
<!-- CREATE NEW ACCOUNT -->
<div aria-labelledby="newaccountform">
<!-- BOXED AREA -->
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newaccountform" class="slds-text-heading--medium slds-p-vertical--medium">Add a new account</legend>
<!-- CREATE NEW ACCOUNT FORM -->
<form class="slds-form--stacked">
<div class="slds-form-element">
<label class="slds-form-element__label" for="accountName">Name</label>
<div class="slds-form-element__control">
<input id="accountName" class="slds-input" type="text" placeholder="New account"/>
</div>
</div>
<button class="slds-button slds-button--brand slds-m-top--medium" type="button" onClick="createAccount()">Create Account</button>
</form>
<!-- CREATE NEW ACCOUNT FORM -->
</fieldset>
<!-- / BOXED AREA -->
</div>
<!-- / CREATE NEW ACCOUNT -->
<!-- ACCOUNT LIST TABLE -->
<div id="accountList" class="slds-p-vertical--medium"></div>
<!-- / ACCOUNT LIST TABLE -->
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
<!-- FOOTER -->
<footer role="contentinfo" class="slds-p-around--large">
<!-- LAYOUT GRID -->
<div class="slds-grid slds-grid--align-spread">
<p class="slds-col">Salesforce Lightning Design System Example</p>
<p class="slds-col">© Your Name Here</p>
</div>
<!-- / LAYOUT GRID -->
</footer>
<!-- / FOOTER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
</body>
<!-- JAVASCRIPT -->
<script>
var account = new SObjectModel.Account();
var outputDiv = document.getElementById("accountList");
function updateOutputDiv() {
account.retrieve(
{orderby: [{LastModifiedDate: 'DESC'}], limit: 10},
function(error, records) {
if (error) {
alert(error.message);
} else {
// create data table
var dataTable = document.createElement('table');
dataTable.className = 'slds-table slds-table--bordered';
// add header row
var tableHeader = dataTable.createTHead();
var tableHeaderRow = tableHeader.insertRow();
var tableHeaderRowCell1 = tableHeaderRow.insertCell(0);
tableHeaderRowCell1.appendChild(document.createTextNode('Account name'));
tableHeaderRowCell1.setAttribute('scope', 'col');
var tableHeaderRowCell2 = tableHeaderRow.insertCell(1);
tableHeaderRowCell2.appendChild(document.createTextNode('Account ID'));
tableHeaderRowCell2.setAttribute('scope', 'col');
// build table body
var tableBody = dataTable.appendChild(document.createElement('tbody'))
var dataRow, dataRowCell1, dataRowCell2, recordName, recordId;
records.forEach(function(record) {
dataRow = tableBody.insertRow();
dataRowCell1 = dataRow.insertCell(0);
recordName = document.createTextNode(record.get("Name"));
dataRowCell1.appendChild(recordName);
dataRowCell2 = dataRow.insertCell(1);
recordId = document.createTextNode(record.get("Id"));
dataRowCell2.appendChild(recordId);
});
// create data table wrapper
var tableWrapper = document.createElement('div');
tableWrapper.className = 'slds-scrollable--x';
tableWrapper.appendChild(dataTable);
if (outputDiv.firstChild) {
// replace table if it already exists
// see later in tutorial
outputDiv.replaceChild(tableWrapper, outputDiv.firstChild);
} else {
outputDiv.appendChild(tableWrapper);
}
}
}
);
}
function createAccount() {
var accountName = document.getElementById("accountName").value;
var account = new SObjectModel.Account();
account.create({Name: accountName}, function(error, records) {
if (error) {
alert(error.message);
} else {
updateOutputDiv();
}
});
return false;
}
updateOutputDiv();
</script>
<!-- / JAVASCRIPT -->
</html>
</apex:page>
Example 4 : Salesforce Lightning Design System(SLDS) list view example with Account object using Avatar's
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title>Salesforce Lightning Design System Trailhead Module</title>
<apex:stylesheet value="{!URLFOR($Resource.SLDS100, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
</head>
<apex:remoteObjects >
<apex:remoteObjectModel name="Account" fields="Id,Name,LastModifiedDate"/>
</apex:remoteObjects>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds">
<!-- MASTHEAD -->
<p class="slds-text-heading--label slds-m-bottom--small">Salesforce Lightning Design System Module</p>
<!-- / MASTHEAD -->
<!-- PAGE HEADER -->
<div class="slds-page-header" role="banner">
<!-- LAYOUT GRID -->
<div class="slds-grid">
<!-- GRID COL -->
<div class="slds-col">
<!-- HEADING AREA -->
<!-- MEDIA OBJECT = FIGURE + BODY -->
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-avatar slds-avatar--large">
<img src="{!URLFOR($Resource.SLDS100, 'assets/images/avatar1.jpg')}" alt="portrait" />
</span>
</div>
<div class="slds-media__body">
<p class="slds-text-heading--label">Accounts</p>
<h1 class="slds-text-heading--medium">My Accounts</h1>
</div>
</div>
<!-- / MEDIA OBJECT -->
<!-- /HEADING AREA -->
</div>
<!-- GRID COL -->
<div class="slds-col slds-no-flex slds-align-middle">
<div class="slds-button-group" role="group">
<button class="slds-button slds-button--neutral">
New Account
</button>
<button class="slds-button slds-button--neutral">
More
</button>
</div>
</div>
<!-- / GRID COL -->
</div>
<!-- / LAYOUT GRID -->
<p class="slds-text-body--small slds-m-top--x-small">COUNT items</p>
</div>
<!-- / PAGE HEADER -->
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">
<!-- CREATE NEW ACCOUNT -->
<div aria-labelledby="newaccountform">
<!-- BOXED AREA -->
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newaccountform" class="slds-text-heading--medium slds-p-vertical--medium">Add a new account</legend>
<!-- CREATE NEW ACCOUNT FORM -->
<form class="slds-form--stacked">
<div class="slds-form-element">
<label class="slds-form-element__label" for="accountName">Name</label>
<div class="slds-form-element__control">
<input id="accountName" class="slds-input" type="text" placeholder="New account"/>
</div>
</div>
<button class="slds-button slds-button--brand slds-m-top--medium" type="button" onClick="createAccount()">Create Account</button>
</form>
<!-- CREATE NEW ACCOUNT FORM -->
</fieldset>
<!-- / BOXED AREA -->
</div>
<!-- / CREATE NEW ACCOUNT -->
<!-- ACCOUNT LIST TABLE -->
<div id="accountList" class="slds-p-vertical--medium"></div>
<!-- / ACCOUNT LIST TABLE -->
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
<!-- FOOTER -->
<footer role="contentinfo" class="slds-p-around--large">
<!-- LAYOUT GRID -->
<div class="slds-grid slds-grid--align-spread">
<p class="slds-col">Salesforce Lightning Design System Example</p>
<p class="slds-col">© Your Name Here</p>
</div>
<!-- / LAYOUT GRID -->
</footer>
<!-- / FOOTER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
</body>
<!-- JAVASCRIPT -->
<script>
var account = new SObjectModel.Account();
var outputDiv = document.getElementById("accountList");
function updateOutputDiv() {
account.retrieve(
{orderby: [{LastModifiedDate: 'DESC'}], limit: 10},
function(error, records) {
if (error) {
alert(error.message);
} else {
// create data table
var dataTable = document.createElement('table');
dataTable.className = 'slds-table slds-table--bordered';
// add header row
var tableHeader = dataTable.createTHead();
var tableHeaderRow = tableHeader.insertRow();
var tableHeaderRowCell1 = tableHeaderRow.insertCell(0);
tableHeaderRowCell1.appendChild(document.createTextNode('Account name'));
tableHeaderRowCell1.setAttribute('scope', 'col');
var tableHeaderRowCell2 = tableHeaderRow.insertCell(1);
tableHeaderRowCell2.appendChild(document.createTextNode('Account ID'));
tableHeaderRowCell2.setAttribute('scope', 'col');
// build table body
var tableBody = dataTable.appendChild(document.createElement('tbody'))
var dataRow, dataRowCell1, dataRowCell2, recordName, recordId;
records.forEach(function(record) {
dataRow = tableBody.insertRow();
dataRowCell1 = dataRow.insertCell(0);
recordName = document.createTextNode(record.get("Name"));
dataRowCell1.appendChild(recordName);
dataRowCell2 = dataRow.insertCell(1);
recordId = document.createTextNode(record.get("Id"));
dataRowCell2.appendChild(recordId);
});
// create data table wrapper
var tableWrapper = document.createElement('div');
tableWrapper.className = 'slds-scrollable--x';
tableWrapper.appendChild(dataTable);
if (outputDiv.firstChild) {
// replace table if it already exists
// see later in tutorial
outputDiv.replaceChild(tableWrapper, outputDiv.firstChild);
} else {
outputDiv.appendChild(tableWrapper);
}
}
}
);
}
function createAccount() {
var accountName = document.getElementById("accountName").value;
var account = new SObjectModel.Account();
account.create({Name: accountName}, function(error, records) {
if (error) {
alert(error.message);
} else {
updateOutputDiv();
}
});
return false;
}
updateOutputDiv();
</script>
<!-- / JAVASCRIPT -->
</html>
</apex:page>
Example 5 : Salesforce Lightning Design System(SLDS) with List Data table using Icons.
Example 6 : Salesforce Lightning Design System(SLDS) with Record Home stype approach.
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title>Salesforce Lightning Design System Trailhead Module</title>
<apex:stylesheet value="{!URLFOR($Resource.SLDS100, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
</head>
<apex:remoteObjects >
<apex:remoteObjectModel name="Account" fields="Id,Name,LastModifiedDate"/>
</apex:remoteObjects>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds">
<!-- MASTHEAD -->
<p class="slds-text-heading--label slds-m-bottom--small">Salesforce Lightning Design System Module</p>
<!-- / MASTHEAD -->
<!-- PAGE HEADER -->
<div class="slds-page-header" role="banner">
<!-- LAYOUT GRID -->
<div class="slds-grid">
<!-- GRID COL -->
<div class="slds-col">
<!-- HEADING AREA -->
<!-- MEDIA OBJECT = FIGURE + BODY -->
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-avatar slds-avatar--large">
<img src="{!URLFOR($Resource.SLDS100, 'assets/images/avatar1.jpg')}" alt="portrait" />
</span>
</div>
<div class="slds-media__body">
<p class="slds-text-heading--label">Accounts</p>
<h1 class="slds-text-heading--medium">My Accounts</h1>
</div>
</div>
<!-- / MEDIA OBJECT -->
<!-- /HEADING AREA -->
</div>
<!-- GRID COL -->
<div class="slds-col slds-no-flex slds-align-middle">
<div class="slds-button-group" role="group">
<button class="slds-button slds-button--neutral">
New Account
</button>
<button class="slds-button slds-button--neutral">
More
</button>
</div>
</div>
<!-- / GRID COL -->
</div>
<!-- / LAYOUT GRID -->
<p class="slds-text-body--small slds-m-top--x-small">COUNT items</p>
</div>
<!-- / PAGE HEADER -->
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">
<!-- CREATE NEW ACCOUNT -->
<div aria-labelledby="newaccountform">
<!-- BOXED AREA -->
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newaccountform" class="slds-text-heading--medium slds-p-vertical--medium">Add a new account</legend>
<!-- CREATE NEW ACCOUNT FORM -->
<form class="slds-form--stacked">
<div class="slds-form-element">
<label class="slds-form-element__label" for="accountName">Name</label>
<div class="slds-form-element__control">
<input id="accountName" class="slds-input" type="text" placeholder="New account"/>
</div>
</div>
<button class="slds-button slds-button--brand slds-m-top--medium" type="button" onClick="createAccount()">Create Account</button>
</form>
<!-- CREATE NEW ACCOUNT FORM -->
</fieldset>
<!-- / BOXED AREA -->
</div>
<!-- / CREATE NEW ACCOUNT -->
<!-- ACCOUNT LIST TABLE -->
<div id="accountList" class="slds-p-vertical--medium"></div>
<!-- / ACCOUNT LIST TABLE -->
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
<!-- FOOTER -->
<footer role="contentinfo" class="slds-p-around--large">
<!-- LAYOUT GRID -->
<div class="slds-grid slds-grid--align-spread">
<p class="slds-col">Salesforce Lightning Design System Example</p>
<p class="slds-col">© Your Name Here</p>
</div>
<!-- / LAYOUT GRID -->
</footer>
<!-- / FOOTER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
</body>
<!-- JAVASCRIPT -->
<script>
var account = new SObjectModel.Account();
var outputDiv = document.getElementById("accountList");
function updateOutputDiv() {
account.retrieve(
{orderby: [{LastModifiedDate: 'DESC'}], limit: 10},
function(error, records) {
if (error) {
alert(error.message);
} else {
var accountIcon = '<span class="slds-icon__container slds-icon-standard-account">';
accountIcon += '<svg aria-hidden="true" class="slds-icon">';
accountIcon += '<use xlink:href="{!URLFOR($Resource.SLDS100, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>';
accountIcon += '</svg><span class="slds-assistive-text">Account</span></span>';
var html = '<div class="slds-scrollable--x"><table class="slds-table slds-table--bordered">';
html += '<thead><tr><th scope="col">Type</th>';
html += '<th scope="col">Account name</th>';
html += '<th scope="col">Account ID</th></tr></thead><tbody>';
records.forEach(function(record) {
html += '<tr><td>' + accountIcon + '</td>';
html += '<td>' + record.get("Name") + '</td>';
html += '<td>' + record.get("Id") + '</td></tr>';
});
html = html + '</tbody></table></div>';
outputDiv.innerHTML = html;
}
}
);
}
function createAccount() {
var accountName = document.getElementById("accountName").value;
var account = new SObjectModel.Account();
account.create({Name: accountName}, function(error, records) {
if (error) {
alert(error.message);
} else {
updateOutputDiv();
}
});
return false;
}
updateOutputDiv();
</script>
<!-- / JAVASCRIPT -->
</html>
</apex:page>
This example is not dynamic. you can use dynamic components.
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title>Salesforce Lightning Design System Trailhead Module</title>
<apex:stylesheet value="{!URLFOR($Resource.SLDS100, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
</head>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds">
<!-- MASTHEAD -->
<p class="slds-text-heading--label slds-m-bottom--small">Salesforce Lightning Design System Trailhead Module</p>
<!-- / MASTHEAD -->
<!-- PAGE HEADER -->
<div class="slds-page-header" role="banner">
<!-- PAGE HEADER TOP ROW -->
<div class="slds-grid">
<!-- PAGE HEADER / ROW 1 / COLUMN 1 -->
<div class="slds-col">
<!-- HEADING AREA -->
<!-- MEDIA OBJECT = FIGURE + BODY -->
<div class="slds-media">
<div class="slds-media__figure">
<svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-user">
<use xlink:href="{!URLFOR($Resource.SLDS100, 'assets/icons/standard-sprite/svg/symbols.svg#user')}"></use>
</svg>
</div>
<div class="slds-media__body">
<p class="slds-text-heading--label">Account</p>
<h1 class="slds-text-heading--medium">SLDS Inc.</h1>
</div>
</div>
<!-- / MEDIA OBJECT -->
<!-- HEADING AREA -->
</div>
<!-- / PAGE HEADER / ROW 1 / COLUMN 1 -->
<!-- PAGE HEADER / ROW 1 / COLUMN 2 -->
<div class="slds-col slds-no-flex slds-align-middle">
<div class="slds-button-group" role="group">
<button class="slds-button slds-button--neutral">
Contact
</button>
<button class="slds-button slds-button--neutral">
More
</button>
</div>
</div>
<!-- / PAGE HEADER / ROW 1 / COLUMN 2 -->
</div>
<!-- / PAGE HEADER TOP ROW -->
<!-- PAGE HEADER DETAIL ROW -->
<div class="slds-grid slds-page-header__detail-row">
<!-- PAGE HEADER / ROW 2 / COLUMN 1 -->
<div class="slds-col--padded slds-size--1-of-4">
<dl>
<dt>
<p class="slds-text-heading--label slds-truncate">Field 1</p>
</dt>
<dd>
<p class="slds-text-body--regular slds-truncate">Description that demonstrates truncation with a long text field</p>
</dd>
</dl>
</div>
<!-- PAGE HEADER / ROW 2 / COLUMN 2 -->
<div class="slds-col--padded slds-size--1-of-4">
<dl>
<dt>
<p class="slds-text-heading--label slds-truncate">Field 2</p>
</dt>
<dd><a href="#">Hyperlink 2</a></dd>
</dl>
</div>
<!-- PAGE HEADER / ROW 2 / COLUMN 3 -->
<div class="slds-col--padded slds-size--1-of-4">
<dl>
<dt>
<p class="slds-text-heading--label slds-truncate">Field 3</p>
</dt>
<dd><a href="#">Hyperlink 3</a></dd>
</dl>
</div>
<!-- PAGE HEADER / ROW 2 / COLUMN 4 -->
<div class="slds-col--padded slds-size--1-of-4">
<dl>
<dt>
<p class="slds-text-heading--label slds-truncate">Field 4</p>
</dt>
<dd><a href="#">Hyperlink 4</a></dd>
</dl>
</div>
</div>
<!-- / PAGE HEADER DETAIL ROW -->
</div>
<!-- / PAGE HEADER -->
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">
<!-- RELATED LIST CARDS-->
<div class="slds-grid slds-m-top--large">
<!-- MAIN CARD -->
<div class="slds-col slds-col-rule--right slds-p-right--large slds-size--8-of-12">
<div class="slds-card">
<header class="slds-card__header slds-grid">
<div class="slds-col slds-media slds-media--center">
<div class="slds-media__figure">
<svg aria-hidden="true" class="slds-icon slds-icon-standard-contact slds-icon--small">
<use xlink:href="{!URLFOR($Resource.SLDS100, 'assets/icons/standard-sprite/svg/symbols.svg#contact')}"></use>
</svg>
</div>
<div class="slds-media__body">
<h3 class="slds-text-heading--small">Contacts</h3>
</div>
</div>
<div class="slds-col slds-no-flex">
<button class="slds-button slds-button--neutral slds-button--small">Add</button>
</div>
</header>
<!-- CARD BODY = TABLE -->
<section class="slds-card__body">
<div class="slds-scrollable--x">
<table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal">
<thead>
<tr class="slds-no-hover">
<th class="slds-text-heading--label slds-size--1-of-4" scope="col">Name</th>
<th class="slds-text-heading--label slds-size--1-of-4" scope="col">Company</th>
<th class="slds-text-heading--label slds-size--1-of-4" scope="col">Title</th>
<th class="slds-text-heading--label slds-size--1-of-4" scope="col">Email</th>
<th class="slds-row-action" scope="col">
<button class="slds-button slds-button--icon-border-filled slds-button--icon-border-small">
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
<use xlink:href="{!URLFOR($Resource.SLDS100, 'assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
</svg>
<span class="slds-assistive-text">Show More</span>
</button>
</th>
</tr>
</thead>
<tbody>
<tr class="slds-hint-parent">
<td class="slds-size--1-of-4" data-label="Name">Adam Choi</td>
<td class="slds-size--1-of-4" data-label="Company">Company One</td>
<td class="slds-size--1-of-4" data-label="Title">Director of Operations</td>
<td class="slds-size--1-of-4" data-label="Email">adam@company.com</td>
<td>
<button class="slds-button slds-button--icon-border-filled slds-button--icon-border-small">
<svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
<use xlink:href="{!URLFOR($Resource.SLDS100, 'assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
</svg>
<span class="slds-assistive-text">Show More</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- / CARD BODY = SECTION + TABLE -->
<footer class="slds-card__footer">
<a href="#">View All</a>
</footer>
</div>
</div>
<!-- / MAIN CARD -->
<!-- COMPACT CARD -->
<div class="slds-col slds-p-left--large slds-size--4-of-12">
<div class="slds-card">
<header class="slds-card__header">
<div class="slds-media slds-media--center">
<div class="slds-media__figure">
<svg aria-hidden="true" class="slds-icon slds-icon-standard-lead slds-icon--small">
<use xlink:href="{!URLFOR($Resource.SLDS100, 'assets/icons/standard-sprite/svg/symbols.svg#lead')}"></use>
</svg>
</div>
<div class="slds-media__body">
<h3 class="slds-text-heading--small">Team</h3>
</div>
</div>
</header>
<section class="slds-card__body">
<!-- LIST WITH ONE ITEM -->
<ul>
<li class="slds-tile slds-hint-parent">
<p class="tile__title slds-truncate"><a href="#">Anne Choi</a></p>
<div class="tile__detail">
<dl class="dl--horizontal slds-text-body--small">
<dt class="slds-dl--horizontal__label">
<p class="slds-truncate">Email:</p>
</dt>
<dd class="slds-dl--horizontal__detail slds-tile__meta">
<p class="slds-truncate">achoi@burlingtion.com</p>
</dd>
</dl>
</div>
</li>
</ul>
<!-- LIST WITH ONE ITEM -->
</section>
<footer class="slds-card__footer">
<a href="#">View All</a>
</footer>
</div>
</div>
<!-- / COMPACT CARD -->
</div>
<!-- / RELATED LIST CARDS -->
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
<!-- FOOTER -->
<footer role="contentinfo" class="slds-p-around--large">
<!-- LAYOUT GRID -->
<div class="slds-grid slds-grid--align-spread">
<p class="slds-col">Salesforce Lightning Design System Example</p>
<p class="slds-col">© Your Name Here</p>
</div>
<!-- / LAYOUT GRID -->
</footer>
<!-- / FOOTER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
</body>
<!-- JAVASCRIPT -->
<!-- / JAVASCRIPT -->
</html>
</apex:page>
Posted in: Administraiton,Salesforce,Salesforce Lightning Design System(SLDS).
45 comments:
I really appreciate for your efforts to make things easy to understand. I was really many students struggling to understand certain concepts but you made it clear and help me bring back my confidence. salesforce Online Training Bangalore
Thank you very much for your good information ios Online Course Bangalore
Really i like this blog and i got lot of information's from your blog.And thanks for sharing!!!!
Best Training Institute in chennai
Hi, Thanks for sharing nice information. For more information please visit.
Very Impressive Salesforce Lightning tutorial. The content seems to be pretty exhaustive and excellent and will definitely help in learning Salesforce Lightning. I'm also a learner taken up Salesforce training and I think your content has cleared some concepts of mine. While browsing for Salesforce Lightning tutorials on YouTube i found this fantastic video on Salesforce.Do check it out if you are interested to know more.:-https://www.youtube.com/watch?v=MOH8Zr7hm5U
nice
Best Salesforce training institute in Noida
Best Salesforce training in Noida- with 100% placement support - Best Salesforce training in Noida- Salesforce training program with live project by real time trainer in noida,. Salesforce training center in Noida.
our service: Best Salesforce training institute in Noida
thanks for sharing this information
tableau training in bangalore
tableau training in bangalore jayanagar
tableau training in bangalore marathahalli
tableau training in bangalore btm
best tableau training institutes in bangalore
tableau classroom training in bangalore
python training in bangalore
best python training institute in bangalore
hi,
Thank you for sharing information about Design. I really like all these ideas.
wedding Card Design
Thank you!
Wonderful blog post, thank you so much for the great information which you provided.
Top 5 features of salesforce lightning
i am a freelancer and work according to contract, for more details contact us with the information provided below.
play game and win snapdeal lucky draw coupon 2019. contact us, play and win snapdeal lucky draw winner prizes.
lucky draw snapdeal contact number 6289379055 call to get more information
Lucky Draw Snapdeal costomer care number
snapdeal lucky draw contact number
snapdeal lucky draw contest 2019
snapdeal lucky draw 2019 list
snapdeal lucky draw contact number
snapdeal lucky draw 2019
Best Regards
snapdeal lucky draw winners 2019
Thanks for sharing Information
"Sanjary Academy provides excellent training for Piping design course. Best Piping Design Training Institute in Hyderabad,
Telangana. We have offer professional Engineering Course like Piping Design Course,QA / QC Course,document Controller
course,pressure Vessel Design Course, Welding Inspector Course, Quality Management Course, #Safety officer course."
Piping Design Course
Piping Design Course in India
Piping Design Course in Hyderabad
Welding Inspector Course
Quality Management Course
Quality Management Course in india
Safety officer course
salesforce course in hyderabad
devops online training
full stack web development course
Thanks for sharing all your Awesome works, Looking towards more about it...Keep this same ever
Java training in chennai | Java training in annanagar | Java training in omr | Java training in porur | Java training in tambaram | Java training in velachery
Once you installed the SLDS package you will get the static resource that contains CSS, Images, Avatars
link alternatif pastipoker
Thanks, this is generally helpful.
Still, I followed step-by-step your method in this
salesforce training
salesforce online training India
salesforce online training
salesforce online training in Hyderabad
This blog is very useful and informative. Thanks for sharing!
audit firms in dubai
accounting firms in dubai
vat firms in dubai
business valuation services in dubai
business setup in dubai
Nice post. Thanks for sharing! I want people to know just how good this information is in your article. It’s interesting content and Great work.
Saleforce Training in Gurgaon
Saleforce Developer Training in Gurgaon
Salesforce lightning training in Gurgaon
Salesforce Einstein training in Gurgaon
Pretty Blog! I found some useful information in your blog, it was awesome to read, thanks for sharing this great content to my vision, keep sharing. Check out our website also we are one of the best Salesforce Consulting Company in San Deigo . We are register salesforce consulting and ISV Partner.
Great Post ! thanks for sharing ! to know more visit https://www.ksolves.com/salesforce-development-company
buy online ambien 10mg
buy online ambien 10mg
buy online xanax 1mg
buy online xanax 1mg
buy online xanax 1mg
buy online ambien 10mg
buy online xanax 1mg
buy online xanax 1mg
buy online xanax 1mg
buy online xanax 1mg
buy online xanax 1mg
buy online xanax 1mg
buy online cialis 20mg
Buy Online Ambien 10mg
Buy Tramadol 100mg TOP-DOL 180-Pills
Buy Ativan 2mg Online Cheap Price
Buy clonazepam 2mg online
thanks for sharing awesome information
job guaranteed courses in bangalore
full stack developer course
full stack training in bangalore
Buy Clonazepam(Klonopin) Online
Useful information,thanks for sharing. Salesforce Institute in Gurgaonallows to store huge information related to customers and employees too and thereby leads to improved informational organization.
Buy Ambien Online
Buy Tramadol 100 mg Online
Post a Comment