Cards

<div class="card">
  <div class="card_header">
    <img class="placeholder" alt="" />
  </div>
  <div class="card_section">
    <h5 class="text-6">This is a card</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod in leo ac elementum.</p>
  </div>
  <div class="card_footer">
    footer
  </div>
</div>

Template

@mixin cardVariables
/*  1. bg-color ............. */  var(--card-background-color),
/*  2. text color ........... */  var(--card-text-color),
/*  3. border width ......... */  var(--card-border-width),
/*  4. border color ......... */  var(--card-border-color),
/*  5. border radius ........ */  var(--card-border-radius),
/*  6. internal border width  */  var(--card-inner-border-width),
/*  7. header img min height  */  var(--card-header-img-height),
/*  8. inset / gutter ....... */  var(--card-gutter),
/*  9. vertical spacing ..... */  var(--card-v-spacing),
/* 10. section spacing ...... */  var(--card-section-spacing),
/* 11. footer padding ....... */  var(--card-footer-padding),
/* 12. line height .......... */  var(--card-line-height),
/* 13. box shadow ........... */  var(--card-shadow),
/* 14. font family .......... */  var(--card-font-family);

@mixin cardSelectors
/*  1. card ................. */  .card,
/*  2. card header .......... */  .card_header,
/*  3. card section ......... */  .card_section,
/*  4. card footer .......... */  .card_footer;