SCSS

by alvaroveliz

HTML

<div class="card">
  <div class="card--bacon"></div>
  <div class="card--content">
    <div class="card--body">
      <h4>Title</h4>
      <p>Content</p>
      <a href="">link</a>
    </div>
    <div class="card--actions">
      <button type="button" class="button button--red">Action</button>
    </div>
  </div>
</div>

SCSS

body {
  font-family: 'Open Sans', 'Helvetica', sans;
}

.card {
  display: flex;
  border: 1px solid #eee;
  border-radius: 5px;
  
  &--bacon {
    flex: 10%;
    background: #e1687e;
    max-width: 10px;
    border-radius: 5px 0 0 5px;
  }
  
  
  
  &--body {
    padding: 10px;
    flex: 50%;
    align-self: center;
    overflow: hidden;
  }
  
  &--actions {
     flex: 50%;
     align-self: center;
     text-align: center;
     
     button {   
        min-width: 50%;
        align-self: flex-end;
     }
  }
}

.button {
  padding: 1em;
  
  &--red {
    border: 1px solid #e1687e;
    background-color: darken(#e1687e, 10%);
    color: #FFF;
  }
}