Design in the browser, activity 3: extract repeating elements

CafeCard.vue

<!-- template code -->
<template>
  <div class="cafe-card">
    <h1>Cafe Grumpy</h1>
    <p class="description">Hip local coffeehouse chain serving a range of house-roasted brews in a relaxed setting.</p>
    <dl class="address">
      <dt>Address</dt>
      <dd>224 W 20th St, New York, NY 10011</dd>
    </dl>
    <div class="map"></div>
  </div>
</template>

<!-- 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;
  text-align: left;
}

/* remaining style declarations ommited for readability  */

</style>