doccano/frontend/components/organisms/layout/FeatureCards.vue

<template>
  <v-container>
    <v-layout
      column
      wrap
      class="my-5"
      align-center
    >
      <v-flex xs12 sm4 class="my-3">
        <div class="text-xs-center">
          <h2 class="headline">
            The best features
          </h2>
        </div>
      </v-flex>
      <v-flex xs12>
        <v-container grid-list-xl>
          <v-layout wrap align-center>
            <v-flex
              v-for="(item, index) in featureCards"
              :key="index"
              xs12
              md4
            >
              <feature-card
                :image-src="item.imageSrc"
                :title="item.title"
                :text="item.text"
              />
            </v-flex>
          </v-layout>
        </v-container>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import FeatureCard from '@/components/organisms/layout/FeatureCard'

export default {
  components: {
    FeatureCard
  },

  data() {
    return {
      featureCards: [
        {
          imageSrc: '/images/feature3.png',
          title: 'Team Collaboration',
          text: 'Annotation with your team mates'
        },
        {
          imageSrc: '/images/feature2.png',
          title: 'Any Language',
          text: 'Annotation with any language'
        },
        {
          imageSrc: '/images/feature1.png',
          title: 'Open Source',
          text: 'Annotation with free and customizable'
        }
      ]
    }
  }
}
</script>