diff --git a/uw-frame-components/css/buckyless/widget.less b/uw-frame-components/css/buckyless/widget.less
index ef86c8201..c503d9046 100644
--- a/uw-frame-components/css/buckyless/widget.less
+++ b/uw-frame-components/css/buckyless/widget.less
@@ -421,6 +421,85 @@
   }
 }
 
+.list-content {
+  position: relative;
+  margin: 5px;
+  background: #f3f3f3;
+  border-radius: 3px;
+  height: 150px;
+  color: #333;
+  text-align: center;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  a {
+    display: block;
+    height: 100%;
+    box-shadow: 0 2px 0 #ddd;
+    border-radius: 4px;
+    transition: @background-transition;
+
+    &:hover {
+      background-color: #f8f8f8;
+      box-shadow: 0 3px 0 #ddd;
+    }
+  }
+
+  h4 {
+    font-size: 1.2em;
+    margin: 0;
+    color: #333;
+    padding: 0 5px;
+  }
+
+  div {
+    display: inline-block;
+    float: left;
+  }
+
+  .icon-container {
+    width: 100%;
+    height: 67%;
+
+    i {
+      color: #333;
+      vertical-align: middle;
+      padding: 30px 10px;
+      font-size: 50px;
+    }
+  }
+
+  .list-item-container {
+    display: table;
+    width: 100%;
+    height: 33%;
+
+    h4 {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
+}
+
+.add-favorites {
+  background: transparent;
+  border: 1px dashed #ccc;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    border: 1px solid #f8f8f8;
+  }
+
+  a {
+    transition: @background-transition;
+    box-shadow: 0 0 0 transparent;
+  }
+}
+
 //
 .widget-body {
   .input-group {
diff --git a/uw-frame-components/portal/widgets/directives.js b/uw-frame-components/portal/widgets/directives.js
index 7d4fde112..0f15f067f 100644
--- a/uw-frame-components/portal/widgets/directives.js
+++ b/uw-frame-components/portal/widgets/directives.js
@@ -18,6 +18,21 @@ define(['angular', 'require'], function(angular, require) {
       controller: 'WidgetCardController'
     };
   });
+  
+  /**
+  Just the widget card -- gets the widget type from the scope
+  **/
+  app.directive('compactWidget', function() {
+    return {
+      restrict: 'E',
+      transclude: true,
+      scope: {
+        fname: '@'
+      },
+      templateUrl: require.toUrl('./partials/compact-widget-card.html'),
+      controller: 'WidgetCardController'
+    };
+  });
 
   app.directive('widgetIcon', function() {
     return {
diff --git a/uw-frame-components/portal/widgets/partials/compact-widget-card.html b/uw-frame-components/portal/widgets/partials/compact-widget-card.html
new file mode 100644
index 000000000..9d963cf3b
--- /dev/null
+++ b/uw-frame-components/portal/widgets/partials/compact-widget-card.html
@@ -0,0 +1,17 @@
+<md-card class="list-content" id="widget-id-{{::widget.nodeId}}">
+  <md-button class="widget-action widget-info md-icon-button" aria-label="see a brief description of {{::widget.title}}">
+    <md-tooltip md-direction="top" class="widget-action-tooltip">
+      {{widget.description}}
+    </md-tooltip>
+    <md-icon>info</md-icon>
+  </md-button>
+  <div ng-transclude id="widget-removal"></div>
+  <a aria-labelledby="appTitle_widget.title-{{::widget.nodeId}}" tabindex="0" ng-href="{{widget.url}}" target="{{::widget.target}}">
+    <div class="icon-container">
+      <widget-icon></widget-icon>
+    </div>
+    <div class="list-item-container">
+      <h4 id="appTitle_widget.title-{{::widget.nodeId}}">{{ ::widget.title }}</h4>
+    </div>
+  </a>
+</md-card>