self-sovereign-id/src/components/BusinessCard.vue

<template>
<section>
  <div class="container">
    <div><Libravatar
           :email="card.email"
           :size="80"
           /></div>
    <div>
      <strong>{{ card.name }}</strong><br>
      <span>{{ card.email }}</span><br>
      <span>{{ card.phone }}</span>
    </div>
  </div>
  <footer><small>{{ card.fingerprint }}</small></footer>
</section>
</template>

<script>
import Libravatar from '@/components/Libravatar.vue'

export default {
    name: "BusinessCard",
    components: {
        Libravatar
    },
    data() {
        return {}
    },
    props: ["card"],
}
</script>

<style scoped>
section {
    max-width: 400px;
    min-height: 200px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
    transition: 0.4s;
}
section:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
}
.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.container > div {
    margin: 8px 0;
    padding: 0 12px;
}
footer {
    text-align: center;
    word-break: break-all;
}
small {
    font-size: small;
    font-family: monospace;
}
</style>