Skip to content

Instantly share code, notes, and snippets.

@atulgupta31

atulgupta31/Trailhead_SLDS_Basic

Last active March 11, 2016 21:58
Show Gist options
  • Save atulgupta31/c5860c0d470c443047df to your computer and use it in GitHub Desktop.
Save atulgupta31/c5860c0d470c443047df to your computer and use it in GitHub Desktop.
Download ZIP
Trailhead_SLDS_Basic
Raw
Trailhead_SLDS_Basic
<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 -->
<!-- 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 class="slds-grid">
<div class="slds-col">Column 1</div>
<div class="slds-col">Column 2</div>
<div class="slds-col">Column 3</div>
</div>
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
</body>
</html>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment