Tuesday, May 31, 2016

Salesforce Lightning Design System(SLDS) examples.

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">&copy; 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">&copy; 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">&copy; 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.

<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">&copy; 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>





Example 6 : Salesforce Lightning Design System(SLDS) with Record Home stype approach.

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">&copy; Your Name Here</p>
      </div>
      <!-- / LAYOUT GRID -->
    </footer>
    <!-- / FOOTER --> 

  </div>
  <!-- / REQUIRED SLDS WRAPPER -->    

</body>    

<!-- JAVASCRIPT -->
<!-- / JAVASCRIPT -->    

</html>
</apex:page>






 
| ,