anchor.diff:                      var searchResultTemplate = document.getElementById('search-result-item-template');
                       var searchResult = document.importNode(searchResultTemplate.content, true);
                       // add top level content
  -                    searchResult.querySelector('.mdl-list__item-avatar').textContent = metadata[tabProperty].avatar;
  -                    searchResult.querySelector('.up-list-item-title').textContent = result[metadata[tabProperty].attributes[0]];
  +                    searchResult.querySelector('.up-search-list-item-avatar').classList.add(metadata[tabProperty].avatar);
  +                    searchResult.querySelector('.up-search-list-item-title').textContent = result[metadata[tabProperty].attributes[0]];
                       if (result.url) {
  -                        searchResult.querySelector('.mdl-list__item-secondary-action').href = result.url;
  +                        searchResult.querySelector('.up-search-list-item-secondary-action').href = result.url;
                       } else {
  -                        searchResult.querySelector('.mdl-list__item-secondary-content').style.visibility = 'hidden';
  +                        searchResult.querySelector('.up-search-list-item-secondary-content').style.visibility = 'hidden';
                       }
                       var resultAttributeList = searchResult.querySelector('dl');
  -                    // QUESTION: should that attribute picking be handled server-side?
  +                    // QUESTION: should that attribute picking be handled server-side? YES
                       // add each attribute that should be shown for a result
                       _.forEach(metadata[tabProperty].attributes, function (attributeName) {
                           var attributeValue = result[attributeName];
  
positive.code: 
  <template id="search-result-no-results-template">
      <div class="h3 text-center">
           <i class="material-icons">warning</i>
           No Results Found
           <i class="material-icons">warning</i>
       </div>
  </template>
  
  <!-- TODO: use existing material design lite from resource server -->
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <!-- above 2 are required for Material Design -->
  
  <!-- TODO: move material design icons, lodash/lodash, github/fetch, webcomponents/template, and taylorhakes/promise-polyfill to resource server -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <!-- similar to fontawesome? -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
  <!-- Does the above replace underscore? -->
  <script src="https://rawgit.com/github/fetch/v2.0.3/fetch.js"></script>
  <script src="https://rawgit.com/webcomponents/template/v1.0.0/template.js"></script>
  <script src="https://rawgit.com/taylorhakes/promise-polyfill/6.0.2/promise.js"></script>
  <style>
              #search-results-tab-panel dt,
              #search-results-tab-panel dd {
                  display: inline;
              }
  
              #search-results-tab-panel dt {
                  font-weight: bold;
              }
  
              #search-results-tab-panel dt::before {
                  content: '';
                  display: block;
              }
  
              #search-results-tab-panel .mdl-list__item-text-body {
                  padding-left: 56px !important;
              }
  
              #search-results-tab-panel #people .mdl-list__item--three-line {
                  height: 152px;
              }
  
              #search-results-tab-panel #people .mdl-list__item--three-line .mdl-list__item-primary-content {
                  height: 116px;
              }
  
              #search-results-tab-panel #people .mdl-list__item--three-line .mdl-list__item-text-body {
                  height: 94px;
              }
  </style>
  <div id="search-results-tab-panel" class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
      <div id="search-results-tab-header" class="mdl-tabs__tab-bar"></div>
  </div>
  
  <script language="javascript" type="text/javascript">
  // search results metadata
  var metadata = { "people" : { "avatar" : "person", "attributes" : [ "displayName", "title", "department", "telephone", "mail" ] },
                   "portlets" : { "avatar" : "apps", "attributes" : [ "title", "description" ] } };
  // fetch search results
  <c:url value="/api/v5-0/portal/search" var="url">
      <c:param name="q" value="${param.query}" />
  
negative.code:                 });
              }
              // add the tab panel to the page
              document.getElementById('search-results-tab-content').appendChild(tabPanel);
          });
  
          // set first tab active
          var firstTab = document.querySelector('#search-results-tab-header .up-search-tab');
          if (firstTab) firstTab.classList.add('active');
          var firstPanel = document.querySelector('#search-results-tab-panel .up-search-panel');
          if (firstPanel) firstPanel.classList.add('active');
      })
      // log error to browser console
      .catch(function(error) {
  