<template>
  <div class="default-card">
    <b-row class="header-sugestion">
      <div class="icon col-md-2">
        <slot name="icon" />
      </div>

      <div class="content col-md-10  text-left">
        <span class="akkurat-regular">{{subTitle}}</span>

        <p class="akkurat-bold"> {{title}}</p>
      </div>
    </b-row>

<div >

<slot name="body" />

</div>

    <p>
      <slot name="btn-more" />
    </p>
  </div>
</template>
<script>
export default {
    props:{
        title:{
            type: String,
            required: true
        },
        subTitle:{
            type: String,
            required: true
        },
        
    }
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/main.scss";
@import "@/assets/css/cards.scss";
.header-sugestion {
  margin: 5px 0px !important;
  padding: 8px 0px;

  .content {
    line-height: 100%;
    p {
      padding: 0;
      margin: 0;
      letter-spacing: 0.4px;
color: #3E3E3E;
    }
    span {
      font-size: 0.7em;
      text-align: left;
      letter-spacing: 0.23px;
    }
  }

  .icon {
    position: relative;
    display: block;
    padding-right: 0px;
    svg {
      position: absolute;

      left: 1em;
      margin: auto;
      width: 32px;
      height: 32px;
     
      border-radius: 50%;
      padding: 6px;
    }
  }
}



.shopping-basket{
        color: #278937;

    position: absolute;
    text-align: center;
    bottom: 1px;
    right: 15px;
}

.default-card{
    background: none !important;
  box-shadow: none !important;
}
</style>