infojune.old/src/components/SoftBox.vue

  <template>
<div id="softbox">
<img width="200px" :src="getImgUrl(img)" :alt='name'>
  <h3>{{name}}</h3>
  <p>{{desc}}</p>
  <div class="btn-container-softbox">
  <a class="sb button buttons" v-for="item in href_array" :key="item" target="_blank" :href="item"></a>
</div>
</div>
</template>
<script>


export default {
  created: function(){
    this.split();
  },

  props: {
    img:String,
    name:String,
    desc:String,
    href:String,
    pubkey:String,
  },

methods: {
getImgUrl(pic) {
    return require('../assets/'+pic)
},
split: function(){
  this.href_array = this.href.split(",");
}
}
}
</script>
<style>
#softbox{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.btn-container-softbox{
  display:grid;
  grid-template-columns: repeat(2, 50%);
}
.buttons{
  margin-right:10px;
}
</style>