<template>
  
  <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
    <div class="section_header">
      <h1 class="title" v-html="properties['Title'].value" v-if="properties['Title'].value"></h1>
      <h4 class="subtitle" v-html="properties['Subtitle'].value" v-if="properties['Subtitle'].value"></h4>
      <p class="paragraph" v-html="properties['Paragraph Text'].value" v-if="properties['Paragraph Text'].value"></p>
    </div>
  </div>

</template>

<script>
  export default {
    name: "BuildableSectionHeader",
    props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
    data() {
      return JSON.parse(this.componentData);
    }
  }
</script>

<style scoped>

</style>