kad-anggota_resize

resources/assets/js/components/demo/voter/home/index.vue

@@ -84,6 +84,7 @@
               <span class="detail-label">UNIT:</span>
               <span class="detail-value">{{ data.user.unit }}</span>
             </div>
+            <br>
             <div class="detail-item">
               <svg id="barcode" class="detail-value">{{ data.user.no_kp }}</svg>
               
@@ -91,9 +92,8 @@
           </div>
 
         </div>
-
         <!-- <div class="contact-info">
-          <p>admin@koppkb.com <i class="bi bi-envelope"></i></p> <br>
+           <p><i class="bi bi-envelope"></i>admin@koppkb.com </p> <br>
           <p>09-7414331 <i class="bi bi-telephone"></i></p><br>
           <p>09-7414334 <i class="bi bi-printer-fill"></i></p><br>
           <p>www.koppkb.com <i class="bi bi-globe"></i></p>
@@ -364,7 +364,7 @@ export default {
 
 
 .kad-keahlian {
-  width: 88mm;
+  width: 85mm;
   /* padding: 0; */
   /* adjust size */
   height: 60mm;
@@ -521,25 +521,19 @@ export default {
   /* keeps text above watermark */
 }
 
+.contact-info {
+  text-align: right;        /* aligns everything inside to right */
+  font-size: 9px;           /* small text for card */
+  line-height: 1.2;
+   color: rgb(12, 12, 12);
+}
+
 .contact-info i {
-    /* Bootstrap primary blue */
-  margin-right: 6px;  text-align: right; /* right-align text next to barcode */
-  font-size: 6px;
-  line-height: 1.3;
-    font-weight: normal;
-}/* space between icon and text */
+  margin-right: 3px;        /* spacing between icon & text */
+  font-size: 8px;           /* icon size */
+  font-weight: normal;
+}
 
 
-/* .kad-bottom {
-  display: flex;
-  justify-content: space-between; /* barcode left, contact info right */
-  /* align-items: flex-end;          /* align vertically at bottom */
-  /* padding: 10px; */
 
-
-/* .contact-info i {
-  margin-right: 4px;
-  color: #f5f6f7;
-  font-size: 6px;
-} */
 </style>