src/components/DeckBuilder/DeckList.vue

@@ -2,12 +2,19 @@
   <section class="decklist">
     <article v-for="(card, i) in cards" :key="i">
       <div class="amt">{{ card.howmany }}</div>
-      <div class="name">{{ fullName(card.data) }}</div>
+      <div class="fullname">
+        <div class="name">{{ card.data.Name }}</div>
+        <div class="subname">
+          {{ card.data.Subname ? card.data.Subname : "" }}
+        </div>
+      </div>
     </article>
   </section>
 </template>
 
 <style lang="scss" scoped>
+@import "@/assets/scss/_variables";
+
 .decklist {
   display: flex;
   flex-direction: column;
@@ -15,17 +22,38 @@
   article {
     display: flex;
     align-content: space-between;
+    align-items: center;
+    border: 1px solid $grey;
+    border-radius: 10px;
+    padding: 5px 3px;
   }
 }
 
+.fullname {
+  display: flex;
+  flex-direction: column;
+}
+
 .amt {
-  margin: 0 5px;
+  margin: 0 10pt;
   font-weight: bold;
   &:after {
     content: " x";
     font-weight: 300;
   }
 }
+
+.name {
+  font-family: $fantasy;
+  font-size: 10.5pt;
+  line-height: 1rem;
+}
+
+.subname {
+  color: $grey-light;
+  font-size: 10pt;
+  line-height: 1rem;
+}
 </style>
 
 <script lang="ts">

src/views/DeckBuilder.vue

@@ -101,9 +101,11 @@
 }
 
 .decklist {
-  header {
   padding: 10px;
   padding-top: 15px;
+  grid-column: 2;
+  header {
+    padding-left: 1rem;
     color: $primary-text;
     font-family: $fantasy;
     h1 {
@@ -111,7 +113,6 @@
       font-weight: 700;
     }
   }
-  grid-column: 2;
 }
 
 .colorfilter,