Skip to content

Instantly share code, notes, and snippets.

@tyoshikawa1106

tyoshikawa1106/DesignSystemVF.page

Last active August 30, 2015 15:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tyoshikawa1106/3207588e56cb8046df47 to your computer and use it in GitHub Desktop.
Save tyoshikawa1106/3207588e56cb8046df47 to your computer and use it in GitHub Desktop.
Download ZIP
Visualforce & Lightning Design System
Raw
DesignSystemVF.page
<apex:page showHeader="true">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<title>Salesforce Lightning Design System Trailhead Module</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Ryan Foster" />
<!-- Lightning Design System -->
<apex:stylesheet value="{!URLFOR($Resource.SLDS080, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
</head>
<body>
<div class="slds">
<ul class="slds-timeline">
<li class="slds-timeline__item">
<span class="slds-assistive-text">Task</span>
<div class="slds-media slds-media--reverse">
<div class="slds-media__figure">
<div class="slds-timeline__actions">
<p class="slds-timeline__date">Feb 24</p>
<button class="slds-button slds-button--icon-border-filled">
<svg aria-hidden="true" class="slds-button__icon">
<use xlink:href="{!URLFOR($Resource.SLDS080, '/assets/icons/utility-sprite/svg/symbols.svg#switch')}"></use>
</svg>
<span class="slds-assistive-text">Switch</span>
</button>
</div>
</div>
<div class="slds-media__body">
<div class="slds-media slds-media--timeline slds-timeline__media--task">
<div class="slds-media__figure">
<svg aria-hidden="true" class="slds-icon slds-icon-standard-task slds-timeline__icon">
<use xlink:href="{!URLFOR($Resource.SLDS080, '/assets/icons/standard-sprite/svg/symbols.svg#task')}"></use>
</svg>
</div>
<div class="slds-media__body">
<div class="slds-media slds-tile slds-media--small">
<div class="slds-media__figure">
<label class="slds-checkbox" for="mark-complete">
<input name="checkbox" type="checkbox" id="mark-complete" />
<span class="slds-checkbox--faux"></span>
<span class="slds-form-element__label slds-assistive-text">mark-complete</span>
</label>
</div>
<div class="slds-media__body">
<p class="slds-tile__title slds-truncate"><a href="#">Review proposals for EBC deck with larger team and have marketing review this</a></p>
<ul class="slds-tile__detail slds-list--horizontal slds-text-body--small">
<li class="slds-list__item slds-m-right--large">
<dl class="slds-dl--inline">
<dt class="slds-dl--inline__label">Contact:</dt>
<dd class="slds-dl--inline__detail"><a href="#">Lei Chan</a></dd>
</dl>
</li>
<li class="slds-list__item">
<dl class="slds-dl--inline">
<dt class="slds-dl--inline__label">Assigned to:</dt>
<dd class="slds-dl--inline__detail"><a href="#">Betty Mason</a></dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="slds-timeline__item">
<span class="slds-assistive-text">Event</span>
<div class="slds-media slds-media--reverse">
<div class="slds-media__figure">
<div class="slds-timeline__actions">
<p class="slds-timeline__date">Feb 24</p>
<button class="slds-button slds-button--icon-border-filled">
<svg aria-hidden="true" class="slds-button__icon">
<use xlink:href="{!URLFOR($Resource.SLDS080, '/assets/icons/utility-sprite/svg/symbols.svg#switch')}"></use>
</svg>
<span class="slds-assistive-text">Switch</span>
</button>
</div>
</div>
<div class="slds-media__body">
<div class="slds-media slds-media--timeline slds-timeline__media--event">
<div class="slds-media__figure">
<svg aria-hidden="true" class="slds-icon slds-icon-standard-event slds-timeline__icon">
<use xlink:href="{!URLFOR($Resource.SLDS080, '/assets/icons/standard-sprite/svg/symbols.svg#event')}"></use>
</svg>
</div>
<div class="slds-media__body">
<p><a href="#">Company One — EBC Meeting</a></p>
<p class="slds-truncate">Let&#x27;s get together to review the theater&#x27;s layout and facilities. We&#x27;ll also discuss potential things that truncate at a certain width.</p>
<ul class="slds-list--horizontal slds-text-body--small">
<li class="slds-list__item slds-m-right--large">
<dl class="slds-dl--inline">
<dt class="slds-dl--inline__label">Time:</dt>
<dd class="slds-dl--inline__detail"><a href="#">Feb 23, 2015 11:00am–12:00pm</a></dd>
</dl>
</li>
<li class="slds-list__item">
<dl class="slds-dl--inline">
<dt class="slds-dl--inline__label">Location:</dt>
<dd class="slds-dl--inline__detail"><a href="#">300 Pike St, San Francisco CA</a></dd>
</dl>
</li>
</ul>
<dl class="slds-dl--inline slds-text-body--small">
<dt class="slds-dl--inline__label">Name:</dt>
<dd class="slds-dl--inline__detail"><a href="#">Lei Chan</a>, <a href="#">Jason Dewar</a>, <a href="#">Gwen Jones</a> and <a href="#">Pete Schaffer</a></dd>
</dl>
</div>
</div>
</div>
</div>
</li>
<li class="slds-timeline__item">
<span class="slds-assistive-text">Call</span>
<div class="slds-media slds-media--reverse">
<div class="slds-media__figure">
<div class="slds-timeline__actions">
<p class="slds-timeline__date">Feb 24</p>
<button class="slds-button slds-button--icon-border-filled">
<svg aria-hidden="true" class="slds-button__icon">
<use xlink:href="{!URLFOR($Resource.SLDS080, '/assets/icons/utility-sprite/svg/symbols.svg#switch')}"></use>
</svg>
<span class="slds-assistive-text">Switch</span>
</button>
</div>
</div>
<div class="slds-media__body">
<div class="slds-media slds-media--timeline slds-timeline__media--call">
<div class="slds-media__figure">
<svg aria-hidden="true" class="slds-icon slds-icon-standard-log-a-call slds-timeline__icon">
<use xlink:href="{!URLFOR($Resource.SLDS080, '/assets/icons/standard-sprite/svg/symbols.svg#log_a_call')}"></use>
</svg>
</div>
<div class="slds-media__body">
<p><a href="#">Mobile conversation on Monday</a></p>
<p class="slds-truncate">Lei seemed interested in closing this deal quickly! Let&#x27;s move move.</p>
<ul class="slds-list--horizontal slds-text-body--small">
<li class="slds-list__item slds-m-right--large">
<dl class="slds-dl--inline">
<dt class="slds-dl--inline__label">Name:</dt>
<dd class="slds-dl--inline__detail"><a href="#">Lei Chan</a></dd>
</dl>
</li>
<li class="slds-list__item">
<dl class="slds-dl--inline">
<dt class="slds-dl--inline__label">Assigned to:</dt>
<dd class="slds-dl--inline__detail"><a href="#">Betty Mason</a></dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="slds-timeline__item">
<span class="slds-assistive-text">Email</span>
<div class="slds-media slds-media--reverse">
<div class="slds-media__figure">
<div class="slds-timeline__actions">
<p class="slds-timeline__date">Feb 24</p>
<button class="slds-button slds-button--icon-border-filled">
<svg aria-hidden="true" class="slds-button__icon">
<use xlink:href="{!URLFOR($Resource.SLDS080, '/assets/icons/utility-sprite/svg/symbols.svg#switch')}"></use>
</svg>
<span class="slds-assistive-text">Switch</span>
</button>
</div>
</div>
<div class="slds-media__body">
<div class="slds-media slds-media--timeline slds-timeline__media--email">
<div class="slds-media__figure">
<svg aria-hidden="true" class="slds-icon slds-icon-standard-email slds-timeline__icon">
<use xlink:href="{!URLFOR($Resource.SLDS080, '/assets/icons/standard-sprite/svg/symbols.svg#email')}"></use>
</svg>
</div>
<div class="slds-media__body">
<div class="slds-tile">
<p class="slds-tile__title slds-truncate"><a href="#">Updated Proposals</a></p>
<div class="slds-tile__detail">
<p class="slds-truncate">Hi guys, Thanks for meeting with the team today and going through the proposals we saw. This goes on until it&#x27;s truncated.</p>
<ul class="slds-list--horizontal slds-text-body--small">
<li class="slds-list__item slds-m-right--large">
<dl class="slds-dl--inline">
<dt class="slds-dl--inline__label">To:</dt>
<dd class="slds-dl--inline__detail"><a href="#">Lei Chan</a></dd>
</dl>
</li>
<li class="slds-list__item">
<dl class="slds-dl--inline">
<dt class="slds-dl--inline__label">From:</dt>
<dd class="slds-dl--inline__detail"><a href="#">Jason Dewar</a></dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div><!-- ./slds end -->
</body>
</html>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment