Cards Demo

by Juan Kristoffer Sanio

HTML

<div class="volunteer-cards">
  <div class="card">
    <div class="card--header">
      <div class="card--icon">
      </div>
    </div>
    <div class="card--content">
      <p>
        There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable
      </p>
    </div>
  </div>
  <div class="card">
    <div class="card--header">
      <div class="card--icon">
      </div>
    </div>
    <div class="card--content">
      <p>
        There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable
      </p>
    </div>
  </div>
  <div class="card">
    <div class="card--header">
      <div class="card--icon">
      </div>
    </div>
    <div class="card--content">
      <p>
        There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable
      </p>
    </div>
  </div>
</div>

CSS

.volunteer-cards {
  text-align: center;
}

.card {
  display: inline-block;
  width: 30%;
  background: #fff;
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.05);
  text-align: left;
  margin:0 .5%;
}

.card--header {
  width: 100%;
  min-height: 100px;
  background: #18bc9c;
  position: relative;
}

.card--icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eee;
  position: absolute;
  bottom: -15px;
  left: calc(50% - 15px);
}

.card--content {
  padding: 30px 10px 10px;
}

.card--content p:first-letter {
  float: left;
  font-size: 185%;
  margin-right: 8px;
}