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;
  flex-direction: row;
  border: 1px solid #eee;
  border-radius: 5px;
  
  &--bacon {
    flex: 1;
    background: #e1687e;
    max-width: 10px;
    border-radius: 5px 0 0 5px;
  }
  
  &--content {
    flex: 1;
    flex-direction: column;
    display: flex;
    
    @media (min-width: 380px) {
      flex-direction: row;
    }

  }
  
  
  &--body {
    padding: 10px;
    flex: 4;
    align-self: left;
    overflow: hidden;
    
    @media (min-width: 380px) {
      align-self: center;
    }
  }
  
  &--actions {
     flex: 1;
     text-align: center;
     align-self: center;
     padding: 10px;
     
     button {
        min-width: 100%;
        align-self: center;
     }
  }
}

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