style.scss

/* objects/_card.scss */
.card {
  padding: round($u-baseline / 2);
  
  background-color: #fff;
  border: 1px solid rgba(color(black), .1);
  box-shadow: 0 1px 2px rgba(color(black), .1);
  border-radius: 3px;
}

// Whoa ok but what about edge-to-edge content inside .card? You gonna have
// modifiers for all the different layout changes to this thing?
//
// Let's try something different

/* objects/_card.scss */
.o-card {
  background-color: #fff;
  border: 1px solid rgba(color(black), .1);
  box-shadow: 0 1px 2px rgba(color(black), .1);
  border-radius: 3px;
  
  // Plus maybe some modifiers...
  // &.o-card--arrow {
  //   [...]
  // }
}


/* helpers/_layout.scss */
.l-isle {
  padding: round($u-baseline / 2);
  
  &--v {
    padding: {
      top: round($u-baseline / 2);
      bottom: round($u-baseline / 2);
    }
  }
}

// Now that's how the pros roll
// :sparkles:

wow.html

<!-- chump -->
<div class="card">
  Whoa, a card with some content with layout and style all smushed together ew
</div>

<!-- champ -->
<div class="o-card l-isle">
  Whoa, a card with some content with LAYOUT TOTALLY INDEPENDENT FROM STYLE ZOMG
</div>

<div class="o-card">
  <img src="whatever.jpg" alt="some wicked photo that’s edge-to-edge in this card" />
  <div class="o-card__content l-isle">
    omg I didn’t even have to do anything crazy
  </div>
</div>

👏

I’ll join the 🎉: 👍