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>






Posted in: ,,

46 comments:

Unknown said...

I really appreciate for your efforts to make things easy to understand. I was really many students struggling to understand certain concepts but you made it clear and help me bring back my confidence. salesforce Online Training Bangalore

December 1, 2017 at 6:55 PM
soukya reddy said...

Thank you very much for your good information ios Online Course Bangalore

December 27, 2017 at 9:45 AM
Unknown said...

Really i like this blog and i got lot of information's from your blog.And thanks for sharing!!!!

Best Training Institute in chennai

February 21, 2018 at 11:10 AM
Unknown said...

Hi, Thanks for sharing nice information. For more information please visit.

June 18, 2018 at 11:59 AM
Unknown said...

Very Impressive Salesforce Lightning tutorial. The content seems to be pretty exhaustive and excellent and will definitely help in learning Salesforce Lightning. I'm also a learner taken up Salesforce training and I think your content has cleared some concepts of mine. While browsing for Salesforce Lightning tutorials on YouTube i found this fantastic video on Salesforce.Do check it out if you are interested to know more.:-https://www.youtube.com/watch?v=MOH8Zr7hm5U

July 30, 2018 at 2:12 PM
Unknown said...

nice

August 26, 2018 at 1:19 AM
Unknown said...

I just got to be distinctly aware of your blog through Google, and found that it's genuinely informative.


mutilateadoll23.com
luffygames.com

December 7, 2018 at 1:57 AM
www.forcetalks.com said...
This comment has been removed by the author.
February 22, 2019 at 6:41 PM
WEBTRACKKER TECHNOLOGY said...

Best Salesforce training institute in Noida


Best Salesforce training in Noida- with 100% placement support - Best Salesforce training in Noida- Salesforce training program with live project by real time trainer in noida,. Salesforce training center in Noida.

our service: Best Salesforce training institute in Noida

June 21, 2019 at 12:22 PM
Rajesh said...

thanks for sharing this information
tableau training in bangalore
tableau training in bangalore jayanagar
tableau training in bangalore marathahalli
tableau training in bangalore btm
best tableau training institutes in bangalore
tableau classroom training in bangalore
python training in bangalore 
best python training institute in bangalore

June 21, 2019 at 3:25 PM
Prince raj said...

hi,

Thank you for sharing information about Design. I really like all these ideas.

wedding Card Design

Thank you!

July 1, 2019 at 4:49 PM
Bharat said...

Wonderful blog post, thank you so much for the great information which you provided.
Top 5 features of salesforce lightning

July 18, 2019 at 3:29 PM
Amit Kumar Singh said...


i am a freelancer and work according to contract, for more details contact us with the information provided below.
play game and win snapdeal lucky draw coupon 2019. contact us, play and win snapdeal lucky draw winner prizes.
lucky draw snapdeal contact number 6289379055 call to get more information
Lucky Draw Snapdeal costomer care number
snapdeal lucky draw contact number
snapdeal lucky draw contest 2019
snapdeal lucky draw 2019 list
snapdeal lucky draw contact number
snapdeal lucky draw 2019

Best Regards
snapdeal lucky draw winners 2019

September 12, 2019 at 1:17 PM
Chandra Sekhar Reddy said...

Thanks for sharing Information
"Sanjary Academy provides excellent training for Piping design course. Best Piping Design Training Institute in Hyderabad,
Telangana. We have offer professional Engineering Course like Piping Design Course,QA / QC Course,document Controller
course,pressure Vessel Design Course, Welding Inspector Course, Quality Management Course, #Safety officer course."
Piping Design Course
Piping Design Course in India­
Piping Design Course in Hyderabad
Welding Inspector Course
Quality Management Course
Quality Management Course in india
Safety officer course

January 4, 2020 at 11:49 AM
shakeel1995 said...

salesforce course in hyderabad
devops online training

full stack web development course

January 7, 2020 at 6:11 PM
Salesforce Developer said...
This comment has been removed by the author.
January 14, 2020 at 10:11 AM
Faizal said...

Thanks for sharing all your Awesome works, Looking towards more about it...Keep this same ever
Java training in chennai | Java training in annanagar | Java training in omr | Java training in porur | Java training in tambaram | Java training in velachery

June 7, 2020 at 11:21 PM
Admin said...

Once you installed the SLDS package you will get the static resource that contains CSS, Images, Avatars
link alternatif pastipoker

July 18, 2020 at 12:53 PM
Anonymous said...


Thanks, this is generally helpful.
Still, I followed step-by-step your method in this
salesforce training
salesforce online training India
salesforce online training
salesforce online training in Hyderabad

September 29, 2020 at 6:45 PM
KGRN said...

This blog is very useful and informative. Thanks for sharing!
audit firms in dubai
accounting firms in dubai
vat firms in dubai
business valuation services in dubai
business setup in dubai

November 11, 2020 at 12:56 PM
Amrita Bansal said...

Nice post. Thanks for sharing! I want people to know just how good this information is in your article. It’s interesting content and Great work.

Saleforce Training in Gurgaon
Saleforce Developer Training in Gurgaon
Salesforce lightning training in Gurgaon
Salesforce Einstein training in Gurgaon

January 27, 2021 at 2:35 PM
Anjali said...

Pretty Blog! I found some useful information in your blog, it was awesome to read, thanks for sharing this great content to my vision, keep sharing. Check out our website also we are one of the best Salesforce Consulting Company in San Deigo . We are register salesforce consulting and ISV Partner.

February 2, 2021 at 3:49 PM
Anonymous said...

Great Post ! thanks for sharing ! to know more visit https://www.ksolves.com/salesforce-development-company

March 1, 2021 at 6:47 PM
Rxmedsusa said...

buy online ambien 10mg

March 25, 2021 at 1:55 PM
Rxmedsusa said...

buy online ambien 10mg

March 25, 2021 at 2:06 PM
Rxmedsusa said...

buy online xanax 1mg

March 25, 2021 at 2:28 PM
Rxmedsusa said...

buy online xanax 1mg

March 25, 2021 at 2:35 PM
Rxmedsusa said...

buy online xanax 1mg

March 25, 2021 at 2:35 PM
Rxmedsusa said...

buy online ambien 10mg

March 25, 2021 at 2:36 PM
Rxmedsusa said...

buy online xanax 1mg

March 25, 2021 at 2:40 PM
Rxmedsusa said...

buy online xanax 1mg

March 25, 2021 at 3:26 PM
Rxmedsusa said...

buy online xanax 1mg

March 25, 2021 at 3:27 PM
Rxmedsusa said...

buy online xanax 1mg

March 25, 2021 at 3:29 PM
Rxmedsusa said...

buy online xanax 1mg

March 25, 2021 at 3:32 PM
Rxmedsusa said...

buy online xanax 1mg

March 25, 2021 at 3:52 PM
Rxmedsusa said...

buy online cialis 20mg

March 25, 2021 at 3:55 PM
Rxmedsusa said...

Buy Online Ambien 10mg

April 2, 2021 at 5:23 PM
rxmeds said...
This comment has been removed by the author.
June 25, 2021 at 10:00 PM
rxmeds said...

Buy Tramadol 100mg TOP-DOL 180-Pills

June 28, 2021 at 9:46 PM
rxmeds said...

Buy Ativan 2mg Online Cheap Price

July 12, 2021 at 5:28 PM
rxmeds said...

Buy clonazepam 2mg online

July 14, 2021 at 1:29 PM
shakunthala said...

thanks for sharing awesome information
job guaranteed courses in bangalore
full stack developer course
full stack training in bangalore

July 27, 2021 at 11:10 AM
rxmeds said...

Buy Clonazepam(Klonopin) Online

August 2, 2021 at 4:38 PM
APTRON Gurgaon said...

Useful information,thanks for sharing. Salesforce Institute in Gurgaonallows to store huge information related to customers and employees too and thereby leads to improved informational organization.

September 8, 2021 at 3:14 PM
Pharmacyblog said...

Buy Ambien Online

September 13, 2021 at 2:47 PM
Rxmedsusa said...

Buy Tramadol 100 mg Online

September 18, 2021 at 1:56 PM

Post a Comment

 
| ,