<template>
<div class="honjo-card">
    <div class="honjo-card__header" v-if="title || $slots.title || $slots.extra">
      <div>
        <span class="honjo-card__title"><slot name="title">{{title}}</slot></span>
        <span class="honjo-card__subtitle"><slot name="subtitle">{{subtitle}}</slot></span>
      </div>
      <div><slot name="extra"></slot></div>
    </div>
    <div class="honjo-card__body"><slot></slot></div>
</div>
</template>

<script lang="ts">

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

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

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

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

</style>
