Skip to content

Instantly share code, notes, and snippets.

@atulgupta31

atulgupta31/Trailhead_SLDS_Listview

Last active March 11, 2016 21:58
Show Gist options
  • Save atulgupta31/0f6ac6d366e9c5855dbb to your computer and use it in GitHub Desktop.
Save atulgupta31/0f6ac6d366e9c5855dbb to your computer and use it in GitHub Desktop.
Download ZIP
Trailhead_SLDS_Listview
Raw
Trailhead_SLDS_Listview
<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>
<!-- Make sure to update the Static Resource Name as per the static resource's name in your org -->
<apex:stylesheet value="{!URLFOR($Resource.REPLACE_WITH_NAME_OF_SLDS_STATIC_RESOURCE, '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">
<!-- 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">&copy; Your Name Here</p>
</div>
<!-- / LAYOUT GRID -->
</footer>
<!-- / FOOTER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
</body>
<!-- JAVASCRIPT -->
<!-- / JAVASCRIPT -->
</html>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment