Pure CSS cards

by dumptyd

HTML

<div class="columns">
  <div class="column">
    <div class="card">
      <div class="header">A card made with Flexbox</div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, aliquid.
      </div>
      <div class="footer">
        <div class="btn">Cancel</div>
        <div class="btn">Edit</div>
        <div class="btn">Save</div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <div class="header">A card made with Flexbox</div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste reprehenderit aspernatur officiis laboriosam architecto sapiente ipsam, dignissimos totam cum, tempore.
      </div>
      <div class="footer">
        <div class="btn">Cancel</div>
        <div class="btn">Edit</div>
        <div class="btn">Save</div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <div class="header">A card made with Flexbox</div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste reprehenderit aspernatur officiis laboriosam architecto sapiente ipsam, dignissimos totam cum, tempore.
      </div>
      <div class="footer">
        <div class="btn">Cancel</div>
        <div class="btn">Edit</div>
        <div class="btn">Save</div>
      </div>
    </div>
  </div>
</div>

SCSS

$border-color: #ccc;
$padding: 10px;
.card {
  display: flex;
  flex-direction: column;
  font-size: 1em;
  height: 100%;
  border: 1px solid $border-color;
  .header {
    font-size: 1.3em;
    font-weight: bold;
    border-bottom: 1px solid $border-color;
    padding: $padding;
  }
  .content {
    padding: $padding;
    flex-grow: 1;
  }
  .footer {
    display: flex;
    flex-wrap: wrap;
    .btn {
      flex: 1 0 0;
      padding: $padding;
      border: 1px solid $border-color;
      border-bottom: none;
      border-right: none;
      text-align: center;
      cursor: pointer;
      &:hover {
        background-color: #333;
        color: #fff;
      }
      &:nth-child(1) {
        border-left: none;
      }
    }
  }
}

/* MISC */

body {
  font-family: 'Arial';
  line-height: 1.3em;
}
$break-xs: 500px;
$break-sm: 768px;
$break-md: 1024px;
$break-lg: 1600px;

.columns {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  .column {
    padding-left: 10px;
    margin-bottom: 10px;
    width: 50%;
    box-sizing: border-box;
    @media screen and (max-width: $break-xs) { width: 100%; }
    @media screen and (min-width: $break-sm) { width: 50%; }
    @media screen and (min-width: $break-md) { width: 33.3%; }
    @media screen and (min-width: $break-lg) { width: 25%; }
  }
}