<script type="text/x-template" id="my-list">
  <div class="my-list">
    <div class="title">{{ title }}</div>
    <div class="list">
      <slot></slot>
    </div>
  </div>
</script>

<div id="app">
  <my-list title="Shapes">
    <div class="list-item" v-for="shape in shapes">
      <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
    </div>
  </my-list>
  
  <my-list title="Colors">
    <div class="list-item" v-for="color in colors">
      <div>
        <div class="swatch" :style="{background: color.hex}"></div>
        {{ color.name }}
      </div>
    </div>
  </my-list>
</div>

body {
  background: linear-gradient(270deg, #0E6251, #28B463);
}
#app {
  display: flex;
}
.my-list {
  flex: 1 1 50%;
  font-family: Arial;
  color: white;
  $padding: 20px;
  $radius: 4px;
  margin: 20px;
  .title {
    background: #A93226;
    padding: $padding;
    font-weight: bold;
    font-size: 22px;
    border-top-left-radius: $radius;
    border-top-right-radius: $radius;
  }
  .list {
    background: #34495E;
    padding: $padding;
    font-size: 16px;
    border-bottom-left-radius: $radius;
    border-bottom-right-radius: $radius;
  }
  .list-item:not(:last-child) {
    padding-bottom: $padding;
  }
}

.swatch {
  display: inline-block;
  width: 15px;
  height: 10px;
  margin-right: 8px;
}

Vue.component('my-list', {
  template: '#my-list',
  props: ['title']
})

let app = new Vue({
  el: '#app',
  data () {
    return {
      shapes: [
        {
          name: 'Square',
          sides: 4
        },
        {
          name: 'Hexagon',
          sides: 6
        },
        {
          name: 'Triangle',
          sides: 3
        }
      ],
      colors: [
        {
          name: 'Yellow',
          hex: '#f4d03f'
        },
        {
          name: 'Green',
          hex: '#229954'
        },
        {
          name: 'Purple',
          hex: '#9b59b6'
        }
      ]
    }
  }
})