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>
