Working on Task Order card

styles/core/_variables.scss

@@ -165,6 +165,7 @@ $checkbox-border-radius: 2px;
 $border-radius: 3px;
 $button-border-radius: 5px;
 $box-shadow: 0px 2px 5px 0px $color-shadow;
+$box-shadow-big: 0 4px 10px 0 rgba(193,193,193,0.5);
 $focus-outline: 2px dotted $color-gray-light;
 $focus-spacing: 3px;
 $nav-width: 300px;

styles/sections/_task_order.scss

@@ -572,3 +572,35 @@
     }
   }
 }
+
+.card {
+  width: 100%;
+  box-shadow: $box-shadow-big;
+  padding: ($gap * 2) ($gap * 2.5) ($gap * 4) ($gap * 3);
+  margin-bottom: 20px;
+
+  .card__status {
+    margin-bottom: $gap * 2;
+    display: flex;
+    align-items: baseline;
+  }
+
+  .card__header {
+
+  }
+
+  .card__body {
+    font-size: $small-font-size;
+    color: $color-gray-medium;
+  }
+}
+
+.card {
+  .label {
+    margin-left: 0;
+  }
+
+  .datetime {
+    font-size: $small-font-size;
+  }
+}

templates/portfolios/task_orders/index.html

@@ -14,6 +14,19 @@
 {% endmacro %}
 
 {% macro TaskOrderList(task_orders, label='success', expired=False, funded=False) %}
+    <div class="card">
+      <div class="card__status">
+        <span class='label label--warning'>Pending</span>
+        <span class='datetime'>Started May 21, 2019</span>
+      </div>
+      <div class="card__header">
+        <h3>Task Order #12345</h3>
+      </div>
+      <div class="card__body">
+        This is a TO description. This is a TO description. This is a TO description. This is a TO description. This is a TO description. This is a TO description.
+      </div>
+    </div>
+
   <task-order-list
     inline-template
     v-bind:data='{{ task_orders | tojson }}'