<template>
  <div class="card">
    <!-- class="card card-right" -->
    <div class="card-header">
      <p class="card-header-title">
        <slot name="header-title" />
      </p>
      <a href="#" class="card-header-icon" aria-label="more options">
        <slot name="header-icon" />
      </a>
    </div>

    <!-- <div slot="header" class="clearfix">
      <span>Node detail</span>
    </div> -->

    <div class="card-content">
      <div class="content">
        <slot name="content" />
      </div>
    </div>

    <footer class="card-footer">
      <slot name="footer" />
    </footer>
  </div>
</template>
<style lang="sass" scoped>
.card-content
  padding: 1rem

.card-right
  width: $card-right-width
  margin-bottom: 20px

.item
  margin-bottom: 18px

.clickable-icon
  cursor: pointer

// .clearfix:before,
// .clearfix:after
//   display: table
//   content: ''

// .clearfix:after
//   clear: both
</style>
