Demo

section image headline

Source Code

<template>
  <div v-if="image || imageSrc">
    <!-- // #region snippet -->
    <b-container fluid :class="backgroundClass">
      <b-container class="py-5">
        <b-row class="my-5">
          <b-col cols="12" md="6" :class="{ 'order-1': imageOrder }">
            <img class="img-fluid section-image__image" :src="imgSrc()" />
          </b-col>
          <b-col cols="12" md="6" class="d-flex align-items-center">
            <div :class="textClass" class="section-image__content">
              <h1 class="section-image__content__headline">
                {{ headline }}
              </h1>
              <div v-html="bodyHtml" />
            </div>
          </b-col>
        </b-row>
      </b-container>
    </b-container>
    <!-- // #endregion snippet -->
  </div>
</template>

<script>
import RichTextResolver from 'storyblok-js-client/dist/rich-text-resolver.es'

export default {
  name: 'MvadSectionImage',
  props: {
    // #region snippet2
    variant: { type: String, default: '' },
    headline: { type: String, default: '' },
    body: { type: Object },
    image: { type: Object },
    imageSrc: { type: String },
    imagePosition: { type: String, default: '' }
    // #endregion snippet2
  },
  computed: {
    backgroundClass () {
      return `bg-${this.variant}`
    },
    imageOrder () {
      if (this.imagePosition === 'right') {
        return true
      }

      return false
    },
    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
    },
    bodyHtml () {
      const resolver = new RichTextResolver()
      return resolver.render(this.body)
    }
  },
  methods: {
    imgSrc () {
      if (this.imageSrc) {
        return this.imageSrc
      }

      if (this.image) {
        return `${this.image.filename}/m/1500x1200/smart`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.section-image {
  &__content {
    padding-left: $spacer * 2;
    padding-right: $spacer * 2;

    &__headline {
      margin-bottom: $spacer * 2;
    }
  }
  &__image {
    margin-bottom: $spacer * 2;
  }
}
</style>

props

variant: { type: String, default: '' },
headline: { type: String, default: '' },
body: { type: Object },
image: { type: Object },
imageSrc: { type: String },
imagePosition: { type: String, default: '' }

...