<template>
  <header class="jumbotron" :class="{ jumbo: top }">
    <div class="grid grid-container--lg">
      <div :class="_class">
        <h1 v-if="top">{{ title }}</h1>
        <h2 v-else>{{ title }}</h2>
        <slot></slot>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: "bc-section-header",
  props: {
    top: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: null,
    },
  },
  computed: {
    _class() {
      if (this.top) {
        return "column--xs-12 column--md-9 column--xxl-10";
      }
      return "column--12";
    },
  },
};
</script>