Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read

Source Code

<template>
  <div v-if="cards">
    <!-- // #region snippet -->
    <b-container fluid class="hero-section" :class="backgroundClass">
      <b-container class="align-self-center py-5 my-5">
        <b-row v-if="cards">
          <template v-for="card in cards">
            <b-col :key="card.index" lg="4" md="6" sm="12" :class="textClass">
              <b-card
                :title="card.title"
                img-src="https://picsum.photos/600/300/?image=25"
                img-alt="Image"
                img-top
                tag="article"
                class="mb-5"
              >
                <b-card-text>
                  {{ card.content }}
                </b-card-text>

                <b-button
                  v-if="card.buttonTo.cached_url"
                  :to="`/${card.buttonTo.cached_url}`"
                  variant="primary"
                >
                  {{ card.buttonTitle }}
                </b-button>
              </b-card>
            </b-col>
          </template>
        </b-row>
      </b-container>
    </b-container>
    <!-- // #endregion snippet -->
  </div>
</template>

<script>
export default {
  name: 'MvadSectionCards',
  props: {
    // #region snippet2
    cards: { type: Array, default: null },
    variant: { type: String, default: '' }
    // #endregion snippet2
  },
  computed: {
    backgroundClass () {
      return `bg-${this.variant}`
    },
    textClass () {
      let className = ''
      switch (this.variant) {
        case 'primary':
          className = 'text-light'
          break
        case 'secondary':
          className = 'text-dark'
          break
        case 'light':
          className = 'text-dark'
          break
        case 'dark':
          className = 'text-light'
          break
      }
      return className
    }
  }
}
</script>

<style lang="scss" scoped>
.hero-section {
  &__medium {
    height: 25em;
  }
  &__large {
    height: 50em;
  }
}
</style>

props

cards: { type: Array, default: null },
variant: { type: String, default: '' }

...