<template>
  <view class="card-title">
    <view class="card-title__background">
      <view class="card-title__header">
        <slot name="header"></slot>
      </view>
      <view class="card-title__content">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style lang="scss">
.card-title {
  box-sizing: border-box;
  filter: blur(0);
  border-radius: $radius-md;
  background-color: $color-white;
  &__background {
    background-color: rgba($color-primary, 0.15);
    border-radius: $radius-md;
  }
  &__header {
    padding: $padding-xs $padding-md;
  }
  &__content {
    border-radius: $radius-md;
    background-color: $color-white;
    padding: $padding-md;
  }
}
</style>