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

<script type="text/x-template" id="my-list">
<div class="my-list">
  <div class="title">{{ title }}</div>
  <div class="list">
    <div class="list-item" v-for="item in items">
      <slot v-bind="item"></slot>
    </div>
  </div>
</div>
</script>

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', 'items' ]
});

new Vue({
  el: '#app',
  data: {
    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' }
    ]
  }
});