<template>
<div class="glp-section">
  <div class="glp-section__header">
    <div>
      <span class="glp-section__title"><slot name="title">{{title}}</slot></span>
      <span class="glp-section__subtitle"><slot name="subtitle">{{subtitle}}</slot></span>
    </div>
    <div>
      <slot name="extra"></slot>
    </div>
  </div>
  <div><slot></slot></div>
</div>
</template>

<script lang="ts">

import { Vue, Component, Prop, Ref } from 'vue-property-decorator'

@Component({
  components: { }
})
export default class GlpSection extends Vue {
  @Prop(String) title!: string

  @Prop(String) subtitle!: string
}
</script>

<style lang="scss">
@import "./style/index.scss";

</style>
