Article Card with Flexbox

By Laurel Beyers

How do I use This?

An article card using Flexbox with tags, author, time, summary, and other details.

HTML

<div class="card-flex-article card">
  <div class="card-image">
    <img src="https://images.pexels.com/photos/132987/pexels-photo-132987.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
    <span class="label alert card-tag">#Birdie</span>
  </div>
  <div class="card-section">
    <h3 class="article-title">This is a card.</h3>
    <div class="article-details">
      <span class="website">Website</span> &#8226;
      <span class="time">Time</span> &#8226;
      <span class="author">Author Name</span>
    </div>
    <p class="article-summary">This is a quick summary area of the first few sentences from the post. It will be a few sentences.</p>
  </div>
   <div class="card-divider align-middle">
     <div class="avatar with-add-icon">
       <img src="https://placehold.it/35" alt="avatar" />
       <i class="fa fa-plus-circle" aria-hidden="true"></i>
     </div>
    <div class="user-info">
      <p class="user-name">Name</p>
      <p class="category">added to <strong>Category</strong></p>
    </div>
  </div>
  <div class="card-divider align-justify">
    <div class="notability">
      <span class="publications">Publication Number</span> &#8226;
      <span class="likes"># Likes</span>
    </div>
    <div class="card-actions">
      <i class="fa fa-heart-o" aria-hidden="true"></i>
      <i class="fa fa-plus" aria-hidden="true"></i>
      <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
    </div>
  </div>
</div>

.card-flex-article {

  .card-divider {
    display: flex;
    background: transparent;

    p {
      margin-bottom: 0;
    }

    .avatar {
      margin-right: 0.75rem;
    }
  }

  .avatar {
    position: relative;

    img {
      border-radius: 50%;
    }

    &.with-add-icon .fa {
      position: absolute;
      bottom: 0;
      right: 0;
      color: $alert-color;
    }
  }

  .card-actions {
    .fa:not(:last-of-type) {
      margin-right: 1rem;
    }
  }

  .card-image {
    position: relative;
  }

  .card-tag {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 3%;
  }

  .card-section {
    .article-title {
      font-family: 'Merriweather', serif;
      font-weight: bold;
      font-size: 1.75rem;
      margin-bottom: 0;
    }

    .article-details {
      font-size: 0.75rem;
      opacity: 0.5;
      padding-bottom: 0.75rem;
    }

    .article-summary {
      font-family: 'Merriweather', serif;
    }
  }

  .user-info {
    font-size: 0.75rem;

    .user-name {
      font-weight: bold;
      margin-bottom: 0;
    }
  }

  .notability {
    font-size: 0.75rem;
    opacity: 0.5;
  }

}

.card-flex-article .card-divider {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: transparent;
}

.card-flex-article .card-divider p {
  margin-bottom: 0;
}

.card-flex-article .card-divider .avatar {
  margin-right: 0.75rem;
}

.card-flex-article .avatar {
  position: relative;
}

.card-flex-article .avatar img {
  border-radius: 50%;
}

.card-flex-article .avatar.with-add-icon .fa {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #cc4b37;
}

.card-flex-article .card-actions .fa:not(:last-of-type) {
  margin-right: 1rem;
}

.card-flex-article .card-image {
  position: relative;
}

.card-flex-article .card-tag {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 3%;
}

.card-flex-article .card-section .article-title {
  font-family: 'Merriweather', serif;
  font-weight: bold;
  font-size: 1.75rem;
  margin-bottom: 0;
}

.card-flex-article .card-section .article-details {
  font-size: 0.75rem;
  opacity: 0.5;
  padding-bottom: 0.75rem;
}

.card-flex-article .card-section .article-summary {
  font-family: 'Merriweather', serif;
}

.card-flex-article .user-info {
  font-size: 0.75rem;
}

.card-flex-article .user-info .user-name {
  font-weight: bold;
  margin-bottom: 0;
}

.card-flex-article .notability {
  font-size: 0.75rem;
  opacity: 0.5;
}

Article Card with Flexbox

By Laurel Beyers

Responsive Portfolio Resume

Table Expand

Article Card Hover

Article Card with Flexbox

By Laurel Beyers

Similar Building Blocks

Responsive Portfolio Resume

Table Expand

Article Card Hover