New: Added archived value

coscine/issues#1595

src/components/Container/Card.vue

 <template>
   <b-card class="coscine_card" @click.prevent="openCard()">
     <b-row>
+      <div class="col placeholder" style="float:left;"/>
+      <div class="col flag">
+        <b-badge pill variant="warning"
+          v-if="flag_visible==true"
+          style="float:center;"
+        > 
+          {{flag_text}}
+        </b-badge>
+      </div>
       <div class="col icon_bar">
         <button
           v-if="editLink !== ''"
@@ -26,10 +35,11 @@
 </template>
 
 <script>
-import { BCard, BRow } from 'bootstrap-vue';
+import { BCard, BRow, BBadge } from 'bootstrap-vue';
 import Vue from 'vue';
 Vue.component('b-card', BCard);
 Vue.component('b-row', BRow);
+Vue.component('b-badge', BBadge);
 
 import EditIcon from 'vue-material-design-icons/Pencil.vue';
 
@@ -55,6 +65,14 @@ export default Vue.extend({
       default: null,
       type: String,
     },
+    flag_visible: {
+      default: false,
+      type: Boolean,
+    },
+    flag_text: {
+      default: null,
+      type: String,
+    },
   },
   methods: {
     openCard() {
@@ -104,6 +122,9 @@ export default Vue.extend({
 .card.coscine_card .icon_bar {
   height: 2em;
   visibility: hidden;
+  min-width:3em;
+  max-width:3em;
+  width: 3em;
 }
 .card.coscine_card:hover .icon_bar {
   visibility: visible;
@@ -127,4 +148,15 @@ export default Vue.extend({
   color: white;
   background-color: #00549f;
 }
+.card.coscine_card .placeholder {
+  height: 2em;
+  min-width:3em;
+  max-width:3em;
+  width: 3em;
+}
+.card.coscine_card .flag {
+  height: 2em;
+  min-width: 3em;
+  padding: 0.2em;
+}
 </style>