Demo

page header headline

Source Code

<template>
  <div v-if="headline || (headline && image) || (headline && imageSrc)">
    <!-- // #region snippet -->
    <b-container
      fluid
      class="PageHeader"
      :class="backgroundClass"
      :style="{ 'background-image': `url(${imgSrc()})` }"
    >
      <b-container class="align-self-center">
        <h1 class="text-center" :class="textClass">
          {{ headline }}
        </h1>
      </b-container>
    </b-container>
    <!-- // #endregion snippet -->
  </div>
</template>

<script>
export default {
  name: 'MvadPageHeader',
  props: {
    // #region snippet2
    variant: { type: String, default: '' },
    headline: { type: String, default: '' },
    image: { type: Object },
    imageSrc: { type: String },
    size: { type: String, default: 'medium' }
    // #endregion snippet2
  },
  methods: {
    imgSrc () {
      if (this.imageSrc) {
        return this.imageSrc
      }

      if (this.image) {
        return `${this.image.filename}/m/1500x500/smart`
      }
    }
  },
  computed: {
    backgroundClass () {
      return `bg-${this.variant} bg-cover bg-center d-flex PageHeader__${this.size}`
    },
    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
    }
  }
}
</script>

<style lang="scss" scoped>
.PageHeader {
  padding-top: $spacer * 6;

  &__small {
    height: $spacer * 20;
  }

  &__medium {
    height: $spacer * 30;
  }

  &__large {
    height: $spacer * 40;
  }

  &__full-screen {
    height: 100vh;
  }
}
</style>

props

variant: { type: String, default: '' },
headline: { type: String, default: '' },
image: { type: Object },
imageSrc: { type: String },
size: { type: String, default: 'medium' }

...