Design in the browser, activity 6: update CafeCard.vue

CafeCard.vue

<!-- template code -->
<template>
  <div class="cafe-card">
    <h1>{{ cafe.name }}</h1>
    <p class="description">{{ cafe.description }}</p>
    <dl class="hours">
      <dt>Hours</dt>
      <dd>{{ cafe.hours }}</dd>
    </dl>
    <dl class="address">
      <dt>Address</dt>
      <dd>{{ cafe.address }}</dd>
    </dl>
    <div class="map"></div>
  </div>
</template>

<!-- logic code -->
<script>
export default {
  props: ['cafe']
}
</script>

<!-- style code -->
<style scoped>
.cafe-card {
  display: inline-block;
  margin: 1em;
  padding: 1em;
  padding-top: 1.5em;
  width: 14em;
  height: 23em;
  background: white;
  border: 1px solid #C0C0C0;
  position: relative;
  float: left;
  text-align: left;
}

/* remaining style declarations ommited for readability */

</style>