Article News Card

article-news-card.markdown

Article News Card

This is a demo of Justin Kwak's Article News Card that he posted on Dribbble.

Shot Link: https://dribbble.com/shots/2001637-Article-News-Card-UI

A Pen by Andy Tran on CodePen.

License.

index.pug

.container
  //- Pen Info
  .info
    h1 Article News Card
    span Made with <i class='fa fa-heart animated infinite pulse'></i> by <a href='http://andy.design'>Andy Tran</a> | Designed by <a href='http://justinkwak.com'>JustinKwak</a>

  // Normal Demo
  .column
    .demo-title Normal

    // Post
    .post-module

      // Thumbnail
      .thumbnail
        .date
          .day 27
          .month Mar
        img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/photo-1429043794791-eb8f26f44081.jpeg')

      // Post Content
      .post-content
        .category Photos
        h1.title City Lights in New York
        h2.sub_title The city that never sleeps.
        p.description New York, the largest city in the U.S., is an architectural marvel with plenty of historic monuments, magnificent buildings and countless dazzling skyscrapers.
        .post-meta
          span.timestamp
            i.fa.fa-clock- o
            |  6 mins ago
          span.comments
            i.fa.fa-comments
            a(href='#')  39 comments

  // Hover Demo
  .column
    .demo-title Hover

    // Post
    .post-module.hover

      // Thumbnail
      .thumbnail
        .date
          .day 27
          .month Mar
        img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/photo-1429043794791-eb8f26f44081.jpeg')

      // Post Content
      .post-content
        .category Photos
        h1.title City Lights in New York
        h2.sub_title The city that never sleeps.
        p.description New York, the largest city in the U.S., is an architectural marvel with plenty of historic monuments, magnificent buildings and countless dazzling skyscrapers.
        .post-meta
          span.timestamp
            i.fa.fa-clock-o
            |  6 mins ago
          span.comments
            i.fa.fa-comments
            a(href='#')  39 comments

script.js

$(window).load(function() {
  $('.post-module').hover(function() {
    $(this).find('.description').stop().animate({
      height: "toggle",
      opacity: "toggle"
    }, 300);
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//codepen.io/andytran/pen/vLmRVp.js"></script>

style.less

@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-97/variables.less';
@import 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/mixins.less';
@accent: #e74c3c;

@container_width: 800px;

body {
  background: darken(@white, 5%);
  font-family: 'proxima-nova-soft', sans-serif;
  font-size: 14px;
  .font-smoothing;
}

.post-module {
  position: relative;
  z-index: 1;
  display: block;
  background: @white;
  min-width: 270px;
  height: 470px;
  .box-shadow;
  .transitions;
  &:hover {
    .box-shadow(@blur: 35px; @color: fade(@black, 30%););
    .thumbnail {
      img {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        transform: scale(1.1);
        opacity: .6;
      }
    }
    .post-content {
    }
  }
  .thumbnail {
    background: @black;
    height: 400px;
    overflow: hidden;
    .date {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 1;
      background: @accent;
      width: 55px;
      height: 55px;
      padding: 12.5px 0;
      .border-radius(100%);
      color: @white;
      font-weight: 700;
      text-align: center;
      .box-size;
      .day {
        font-size: 18px;
      }
      .month {
        font-size: 12px;
        text-transform: uppercase;
      }
    }
    img {
      display: block;
      width: 120%;
      .transitions;
    }
  }
  .post-content {
    position: absolute;
    bottom: 0;
    background: @white;
    width: 100%;
    padding: 30px;
    .box-size;
    .transitions(@timing: cubic-bezier(.37,.75,.61,1.05));
    .category {
      position: absolute;
      top: -34px;
      left: 0;
      background: @accent;
      padding: 10px 15px;
      color: @white;
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
    }
    .title {
      margin: 0;
      padding: 0 0 10px;
      color: @dark_gray;
      font-size: 26px;
      font-weight: 700;
    }
    .sub_title {
      margin: 0;
      padding: 0 0 20px;
      color: @accent;
      font-size: 20px;
      font-weight: 400;
    }
    .description {
      display: none;
      color: @gray;
      font-size: 14px;
      line-height: 1.8em;
    }
    .post-meta {
      margin: 30px 0 0;
      color: @light_gray;
      .timestamp {
        margin: 0 16px 0 0;
      }
      a {
        color: @light_gray;
        text-decoration: none;
      }
    }
  }
}

.hover {
  &:extend(.post-module:hover all);
  .post-content {
    .description {
      display: block !important;
      height: auto !important;
      opacity: 1 !important;
    }
  }
}



.container {
  max-width: @container_width;
  min-width: 640px;
  margin: 0 auto;
  &:before,
  &:after {
    content: '';
    display: block;
    clear: both;
  }
  .column {
    width: 50%;
    padding: 0 25px;
    .box-size;
    float: left;
    .demo-title {
      margin: 0 0 15px;
      color: @gray;
      font-size: 18px;
      font-weight: bold;
      text-transform: uppercase;
    }
  }
  .info {
    width: 300px;
    margin: 50px auto;
    text-align: center;
    h1 {
      margin: 0 0 15px;
      padding: 0;
      font-size: 24px;
      font-weight: bold;
      color: @dark_gray;
    }
    span {
      color: @gray;
      font-size: 12px;
      a {
        color: @black;
        text-decoration: none;
      }
      .fa {
        color: @accent;
      }
    }
  }
}

styles

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//codepen.io/andytran/pen/vLmRVp.js" rel="stylesheet" />