nuxt-promote-yourself/components/shared/UserTile.vue

<template>
  <div class="user-tile">
    <div class="user-tile-image">
      <figure class="image is-64x64">
        <img class="is-rounded" :src="avatar">
      </figure>
    </div>
    <div class="user-tile-author center">
      <h3 class="user-tile-author-name">by {{name}}</h3>
      <div v-if="date" class="date">{{date}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    name: {type: String, default: ''},
    avatar: {type: String, default: ''},
    date: {type: String, default: ''}
  }
}
</script>

<style scoped lang="scss">
  .user-tile {
    display: flex;
    &-author {
      align-self: center;
      margin-left: 10px;
      &-name {
        font-size: 17px;
      }
    }
    .date {
      font-size: 14px;
    }
  }
</style>