Demo

Hero headline

Source Code

<template>
  <div>
    <b-container
      v-if="image || imageSrc || headline"
      fluid
      class="hero-section"
      :class="backgroundClass"
      :style="{
        'background-image': `url(${imgSrc()})`,
      }"
    >
      <b-container class="align-self-center">
        <b-row>
          <b-col class="d-flex align-items-center">
            <div class="hero-section__content" :class="textClass">
              <h1>{{ headline }}</h1>
              <div v-html="bodyHtml" />
              <b-button
                v-if="buttonPrimary"
                type="button"
                :to="buttonPrimaryTo"
                variant="primary"
                class="mr-2"
              >
                {{ buttonPrimaryTitle }}
              </b-button>
              <b-button
                v-if="buttonSecondary"
                type="button"
                :to="buttonSecondaryTo"
                variant="outline-secondary"
              >
                {{ buttonSecondaryTitle }}
              </b-button>
            </div>
          </b-col>
        </b-row>
      </b-container>
    </b-container>
  </div>
</template>

props

variant: { type: String, default: '' },
headline: { type: String, default: '' },
image: { type: Object },
imageSrc: { type: String },
size: { type: String, default: 'medium' },
buttonPrimary: { type: Boolean, default: false },
buttonSecondary: { type: Boolean, default: false },
buttonPrimaryTitle: { type: String, default: null },
buttonPrimaryTo: { type: String, default: null },
buttonPrimaryHref: { type: String, default: null },
buttonSecondaryTitle: { type: String, default: null },
buttonSecondaryTo: { type: String, default: null },
buttonSecondaryHref: { type: String, default: null }

...